Border Radius for Outline?

[siouxfan45]

I’m creating a double border using the border and outline property. I’ve applied border radius to the border. Unfortunately, I have no idea how to apply a radius on the outline.

[My live example can be viewed here.](http://themeforward.com/demo2/?p=1948#comments “”)

[My full comment CSS can be viewed here.](http://snippi.com/s/5tugbhk “”)

#comments .comment-body {
min-height:150px;
margin-left:65px;
background:#EEE;
padding:15px;
border:10px solid #FFF;
outline:1px solid #DDD;
margin-bottom:10px;
-webkit-border-radius: 50px!important;
-moz-border-radius: 50px!important;
border-radius: 50px!important
}

[wolfcry911]

how about using a box-shadow instead?

box-shadow: 0 0 3px #ddd;

[chrisburton]

Use box-shadow.

@wolfcry911 beat me to it.

[wolfcry911]

alternatively, you could use a 1px border and use background-clip: content-box. This would require adjusting the padding on the container and margin on children

[wolfcry911]

box-shadow should have the border radius by default. tested in FF and works

[wolfcry911]

what browser are you using? Works for me in FF and Safari on Mac

[wolfcry911]

lose the prefixed border-radius and !important – they’re not needed any longer.

and the border-radius needs to be larger than the border width or the interior (background) will be square.

[mgwowsite]

If there is no other way to radius an outline then you can use the box shadow. Box shadow follows the shape of the element.
You can use it like this:

box-shadow: 0 0 3px 0 #ddd;

[Author]

Posts