How to Make Shadow on Border-Bottom

How to make shadow on border-bottom?

Try:

div{-webkit-box-shadow:0px 1px 1px #de1dde; -moz-box-shadow:0px 1px 1px #de1dde; box-shadow:0px 1px 1px #de1dde;  }

<div>wefwefwef</div>

CSS Box Shadow Bottom Only

Do this:

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.

How can I set border bottom to none while using box shadow inset?

You wrote:

The reason I am using 'box-shadow:inset' instead of the regular border
style because it does not alters my box size and shifts my box out of
position.

You can still try to make a border (with border-bottom: none;) and add box-sizing: border-box, which will include the borders (and padding) in the overall width and height of the element.

How to add a shadow for underline (bottom border) in css

find fiddle demo

h1.headerone{
    text-shadow:0 0 5px black;
    /* text-decoration:underline; I didn't use this because gap is low */
    position:relative;
}
h1.headerone:before{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:2px;
    background:#000;
    box-shadow:0 0 5px black;
}

CSS Border Shadow On One Side Of the Border

to do this, you have to use position property and use background image instead of border

.divider {    color: #282837;    width: 70%;    margin: 20px auto;    overflow: hidden;    text-align: center;    line-height: 1.2em;    font-size: 30px;    text-transform: uppercase;    font-weight: 400;position: relative;}
.divider-2 { color: red; }
.divider:before {    content: "";    vertical-align: middle;    display: inline-block;    width: 15%;    border-bottom: 1px dashed #9A9A9A;position: absolute;top: 20px;left: 0px;}
.divider:after {content: "";vertical-align: middle;display: inline-block;width: 15%;border-bottom: 1px dashed #9A9A9A;position: absolute;right: 0;top: 20px;}

<h1 class="divider">MEET OUR <span class="divider-2"> TEAM</span></h1>

How to create a drop shadow only on one side of an element?

UPDATE 4

Same as update 3 but with modern css (=fewer rules) so that no special positioning on the pseudo element is required.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

How to make border bottom inside block?

An inset box shadow seems to be what you require

div {  height: 75px;  background: #c0ffee;}
div:hover {  box-shadow: inset 0 -5px 0 red;}

<div></div>

---

Related Topics