HTML and CSS Reference
In-Depth Information
■
Note
Even if you increase the size of the rounded corners, the background never extends beyond the border.
When borders of different widths meet, the inner and outer curves are smoothed automatically. However,
the specification doesn't lay down any rules about smooth transitions between colors. It simply specifies the
region in which the transition takes place. In all my tests, there's a straight line where one color ends and the next
begins. Figure
9-12
shows examples of how rounded corners are rendered on borders of different widths and
colors (the code is in rounded_different.html).
Figure 9-12.
Rounded corners can also be applied to borders of different widths and colors
Applying Rounded Corners to Various Border Styles
So far, all the examples of
border-radius
have shown only solid borders and elements without a border.
However, rounded corners can be applied to any border style. As with color transitions, it's left up to the browser
to decide how to treat the style on the curve. Figure
9-13
shows how Chrome handles the different styles (the
code is in radius_styles.html).
Figure 9-13.
How Chrome applies rounded corners to different border styles
