davidmatas davidmatas - 6 months ago 78
CSS Question

Any way to declare a size/partial border to a box?

Any way to declare a size/partial border to a box in css3? For example a box with 350px that only shows a border-bottom in its firsts 60px. I think that might be very useful.

Examples:

enter image description here
enter image description here

Answer

Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:

div {
  width:350px; 
  height:100px; 
  background:lightgray; 
  position:relative;
 }
div:after {
  content:''; 
  width:60px; 
  height:4px; 
  background:gray; 
  position:absolute; 
  bottom:-4px;
}

Demo

Comments