Round the corners of outline?

Question

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.

score 8 · Accepted Answer · answered Aug 02 '12 at 09:03

8

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.

answered Aug 02 '12 at 09:03

kapex

28,903
6
107
121

Is it supported by every browser, excluding IE6? – Aug 02 '12 at 09:04
It says that it isn't supported by IE7. – Aug 02 '12 at 09:08
I know a css only solution would be better but maybe https://github.com/albertogasparin/borderBoxModel is an option. Or some conditional ie7 css style. – kapex Aug 02 '12 at 09:17
There must be a way in accomplishing this in css. Without conditionals. – Aug 02 '12 at 09:23
Well, box-radius [isn't supported](http://caniuse.com/border-radius) in older browsers, so I think you don't need to try to get it working with borders for >ie8. In this case I would still just use some conditional stylesheet that use an outline instead. Not sure if a css-only way without conditionals really exists. – kapex Aug 02 '12 at 09:28
I know that the radius isn't supported, but I want it to look nearly same with older browsers also. – Aug 02 '12 at 09:39
box-sizing is the default in IE, it lacks support in that it doesn't allow any alternative to be set. – David Thomas Aug 02 '12 at 09:50

score 0 · Answer 2 · answered Aug 02 '12 at 09:04

0

My idea is untested, but how about using the 50% divs as containers for your actual divs with border?
The bordered-divs then have height and width to auto and set their left, right, top and bottom to 0px

answered Aug 02 '12 at 09:04

Bart Gloudemans

1,201
12
27

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

There is a workaround as per this answer. But you would still have to set outline:0 and use border-radius and/or box-shadow.

edited May 23 '17 at 11:54

Community

1
1

answered Aug 02 '12 at 09:05

Robin Maben

22,194
16
64
99

I don't like workarounds, as they tend to be working only in spesific browsers. – Aug 02 '12 at 09:07
@ChristianNikkanen: Did you atleast try that approach? It's just CSS3 which is implemented in all leading browsers today. – Robin Maben Aug 02 '12 at 09:11
1

Again, there are IE-specific [methods](http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8) for that. And don't you think it's a bit too much trying to support IE7 anyway? :) – Robin Maben Aug 02 '12 at 09:21

score -1 · Answer 4 · answered Aug 02 '12 at 09:03

use following css property to make rounded corner border

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;

If you use this. please post some codes you used. Then only we can able to find the errors or any modification need ...

Thanks

score -2 · Answer 5 · answered Dec 10 '20 at 15:46

-2

The best way to have control on borders is to use box-shadow. It keep rounded corners and can be outside or inside (with inset).

Exemple :

box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/

box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/

answered Dec 10 '20 at 15:46

TPP

1

`box-shadow` is not supported until IE9. It's also already been suggested in another answer. – TylerH Dec 10 '20 at 15:49

score -4 · Answer 6 · answered Oct 12 '13 at 10:36

-4

Another way to do this is to use the OUTLINE property as well as a BORDER-RADIUS of 80 pixels. Like followed:

outline: 5px #FFF;
border-radius: 80px;

This works for small images, not too large of ones. If you want to use the round edge system on larger images, you will have to do just as someone else stated and use the following code:

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;

answered Oct 12 '13 at 10:36

JasonN

1

1

It does not work. Test it. Outline is outside of border. No matter of the border-radius. http://jsfiddle.net/UJmEk/. Also, this question is over a year old, and it has an accepted answer. – Oct 12 '13 at 10:47

Round the corners of outline?

6 Answers6