css border-left 50% height

css border
niao picture niao · May 14, 2010 · Viewed 81.4k times · Source

I want the left border of my div to show only to the half of the div. The same I would like to do to my right border but is should be set from the bottom of the div to the middle of the div. How can I achieve it?

Answer

indextwo picture indextwo · Jan 24, 2014

A sort-of similar but different approach to @Pekka's: use the :after pseudo-selector, like so:

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 25%;
  width: 50%;
  border-bottom: 1px solid #0000CC;
}
<div class="mybox">
  Le content de box.
</div>

...and a jsFiddle for good measure.

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