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

css border
davidmatas picture davidmatas · Jan 12, 2012 · Viewed 54.5k times · Source

Any way to declare a size/partial border to a box in CSS? 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

bookcasey picture bookcasey · Jan 12, 2012

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;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More