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.
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
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.
My full comment CSS can be viewed here.
how about using a box-shadow instead?
box-shadow: 0 0 3px #ddd;
Use box-shadow.
@wolfcry911 beat me to it.
Is there a way to apply the radius to both the border and the box shadow?
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
box-shadow should have the border radius by default. tested in FF and works
I'm attempting to get both the grey area and outer border (through whichever CSS means) to have a matching radius http://themeforward.com/demo2/?p=1948#comments
It seems with these solutions the box-shadow or the border gets the radius, not both.
what browser are you using? Works for me in FF and Safari on Mac
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.
Thanks!