CSS Outside Border

Question

I want to be able to draw a border OUTSIDE of my Div! So if my div is say 20px by 20px, I want a 1px border outside of this (so in essence, I get a div 22x22px large).

I understand that I can just make the div 22x22 to start with, but for reasons I have, I need the borders to be on the outside.

CSS outline works, but I want only border-bottom or border-top thingy, so something like outline-bottom, which does not work, is what I want.

Is there a way to do this?

Thanks

Answer 1

I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.

Look at the simple example below in your browser:

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.

You can read more about it here:
Border
Outline