css - box shadow for simulating top border -


trying simulate top border doesn't start @ left edge of element.

.border-top {     height: 50px;     width: 100px;     box-shadow:  15px -1px 0 0 black; } 

the above css close, produces black 15px wide shadow right of div. how contain that?

http://jsfiddle.net/3sjngyk1/

top border box shadow?

.border-top {    height: 50px;    width: 100px;    box-shadow: 0px -10px 0px 0px red;    margin-top: 25px;    background: lightblue;  }
<div class="border-top"></div>

alternatively, can use pseudo-element , calc (if border isn't going full width - it's not clear question).

.border-top {    height: 50px;    width: 100px;    background: lightblue;    position: relative;    margin-top: 25px;  }  .border-top::after {    content: '';    position: absolute;    height: 5px;    bottom: 100%;    left: 15px;    width: calc(100% - 15px);    background: red;  }
<div class="border-top"></div>


Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -