Round the corners of outline?

css outline
user1537415 picture user1537415 · Aug 2, 2012 · Viewed 13.9k times · Source

So I have these four boxes, floated left, each with a 50% width of the page. I want them to have an outline of 1px solid gray, and I want to round the corners with 6px. I know I could use border:1px solid gray; and border-radius:6px; but the problem is that border adds width to the element. And because the boxes have 50% width, and they're floated left, I can't add a border to them. So is it possible to make outline corners round?

Edit:CSS-only solution would be best, because I need to support every browser excluding IE6.

Answer

kapex picture kapex · Aug 2, 2012

You can still do this with borders by using box-sizing. It includes the border's width in the elements total width and is fairly supported.

Related questions

How do I remove outline on link click?

When I click a link on my website it is creating an outline around the link like so I've tried adding: a.image-link:focus { outline: 0; } and a {outline : none;} But nothing seems to get rid of it. Is there a …

Read More
Outline border bottom only

I'd like to create a bottom outline border when the cursor is over an image and I don't know how to do this. I'd like to use this kind of inner border because I don't want to have layout problems …

Read More
Is it possible to create an outline border with radius?

I known you can add an outline border with CSS3. outline: 10px solid red; Now I was wondering how I can add also a radius to that outline border. I have tried this one, but doesn't work: .radius { padding: 20px 60…

Read More