How to remove the border box-shadow provides?

user_2818814 0
Viewed 5262

So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.

CSS Box-Shadow adds arbitrary white border to Div

To show specifically what I want removed:

enter image description here
The little small white border on the left of the blue.

Here is a JSFiddle and the code:

https://jsfiddle.net/pg5omtqq/

.floating-card {
  background-color: white;
  border-left: 5px solid blue;
  box-shadow: 0px 0px 10px grey;
  margin: 1.0em;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
}
<div class="floating-card">
  <h3 class="tile_title">Title</h3>
</div>

EDIT: To be clear, I want to keep the box-shadow. But have the small white border removed.

css html
4 Answers

This will remove the shadow on the left

 -webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);

You can adjust this by using this generator box shadow. source: https://www.cssmatic.com/box-shadow

user_84373140

Add to your CSS

box-shadow: none;
user_87445950

remove left box-shadow by using below css.

.floating-card{
  background-color: white;
  border-left: 5px solid blue;
  -webkit-box-shadow: 0px 0px 10px 0px grey;
    -moz-box-shadow: 0px 0px 10px 0px grey;
    box-shadow: 0px 0px 10px 0px grey;
  margin: 1.0em;
 padding-top: 5px;
 padding-bottom: 10px;
 padding-left: 25px;
 padding-right: 25px;
}
<div class="floating-card">
    <h3 class="tile_title">Title</h3>
</div>

user_58991530 
-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;
user_81189650
Related