CODEWITHSUNDEEP
css
More Than Five
More Than Five

Reputation: 10419

Border on a side of a DIV

I want a border on the right hand side of a div.

I do:

<div class="span6" style="border-right: 2px solid #727272;">

the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?

Thanks

Upvotes: 1

Views: 217

Answers (3)

Sean Ryan
Sean Ryan

Reputation: 6056

I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.

Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:

.span6 { background: #fff url(bgBorder.png) no-repeat right center; }

Update

A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:

http://jsfiddle.net/designingsean/bsbgX/1/

HTML:

<div class="span6">The content div<div class="border"></div></div>

CSS:

.span6 {
  width:50%;
  height:400px;
  background-color:#ddd;
  position:relative;
  padding:10px;
}
.border {
  width:2px;
  background-color:#222;
  position:absolute;
  top:5%;
  bottom:5%;
  right:0;
}

Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.

Upvotes: 1

koningdavid
koningdavid

Reputation: 8085

This picture show's how border's work

W3C box model

You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:

http://cssdeck.com/labs/kyrvt8hf

div {
  position: relative;
}

div:after {
  display: block;
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: 0;
  border-right: 2px solid red;
}

Upvotes: 4

Related Questions