On 27/07/2012 12:26 AM, Tim Arnold wrote:
Actually, that's only "kind of" working. The problem with rounded
corners on images is, if you want to add any kind of border as well,
you're screwed. If you increase the border width on the demo at
http://www.mytechnet.talktalk.net/round-corners.html, you'll see that
the corner of the image will intrude, un-rounded, in to the border
color. It certainly works if you are simply rounding the image
corners, but the only solution I've seen that works reliably to draw a
border around the rounded-corner image is to make the image a
background image and apply your rounding and borders to the container.
Not a great solution for any number of reasons.
Any solutions not involving background images greatly appreciated!!
Tim
Each time you increase the width of the border, you must also increase
the border-radius by a corresponding amount. Like so.
img {
border:10px solid red; /* + 9px */
border-bottom-left-radius:29px; /* + 9px */
display: block;
}
The reason for this is that the curve is applied to the border-box (the
outside edge of the border). This is seen in the image found here [1]
under the initial description for border-radius.
1. http://dev.w3.org/csswg/css3-background/#corners
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
