CODEWITHSUNDEEP
htmlcss
Westwick
Westwick

Reputation: 2487

Is it possible to add padding to css border property?

I'm trying to make this jsfiddle (http://jsfiddle.net/kkbdex3p/) look more like this: http://i.imgur.com/8FxmAeR.jpg

More specifically, what I notice is that in the image, the borders between the sections appear to have this padding on the top and bottom, so that the border is not full height. Is it possible to do this in my jsfiddle example, i.e. make the red borders have a padding on top and bottom so they aren't full height?

I've thought of adding a new element like so:

<li class="divider"></li>

And maybe trying to style that (1px wide, padding on top and bottom), but I get weird results and I'd love a css only solution if possible. Any ideas?

Upvotes: 1

Views: 3871

Answers (1)

BenM
BenM

Reputation: 53198

You could use the :after psuedo-element to achieve this:

li {
    display: inline-block;
    position: relative;
    padding: 0 20px;
}

li:after {
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    border-right: 1px solid red;
    content: '';
    margin: 0 -20px;
}

li:first-child:after { display: none; }

jsFiddle Demo

Upvotes: 7

Related Questions