CODEWITHSUNDEEP
htmlcss
Mr. Alien
Mr. Alien

Reputation: 157294

How can I have a border with a shadow only around the border and not around element?

My fiddle will tell you all but I need a border with shadow, now this is fine if I use an empty div with no height, and I use box-shadow property but am not getting this effect when my div contains some text...So is there any workaround for this? Do I need to add an empty element to achieve this type of effect?

Fiddle

CSS

.what_i_want {
    width: 100px;
    border-bottom: 2px solid #000000;
    margin: 50px;
    box-shadow: 0 0 5px #000;
}

.how_i_achieve_the_above_here {
    margin: 50px;
    border-bottom: 2px solid #000000;
}

HTML

<div class="what_i_want"></div>
<div class="how_i_achieve_the_above_here">Vaibhav</div>

Upvotes: 1

Views: 109

Answers (2)

Adam
Adam

Reputation: 379

won't box-shadow just put a shadow around the "box" around the words anyways? Can't you just use a <h1> or <p> tag with 100% width and a bottom-border with a shadow? Not tested, but seems it should work.

Upvotes: 1

nice ass
nice ass

Reputation: 16709

jsfiddle

.how_i_achieve_the_above_here:after{
    position:absolute;
    content: '';
    width:100%;
    height:2px;
    box-shadow: 0 0 5px #000;
    left:0;
    bottom:-2px;
}

Upvotes: 2

Related Questions