css3 - Custom CSS border styles (this one is tricky!) -


i have tricky css border want style. want achieve border effect div, div height 10px 1px solid green border, right border has overlay of 4px solid red, vertically-centers , 5px high.

see below:

enter image description here

any bright ideas? i've played around pseudo elements no luck. want in single div.

thanks

you can css3.

div {     width:10px;     height:10px;     border:1px solid green;     position:relative; }  div:after {     content: '';     background: red;     width: 3px;     height: 6px;     position: absolute;     right: -2px;     top: 2px; } 

you have play around pixel value's make want have (your example image doesn't 10px x 10px).

hope helps.


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -