Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Holy Grail: Rounded Corners
You should know by now that to make your site compliant with Web 2.0 (and other buzzwords), it must feature rounded corners somewhere. So important is this feature that CSS3 had a property introduced to it, in order to add them to any box you want: border-radius. You simply give this property the sizes for the radius of each corner you want to make round and shiny:
article {
border-radius: 10px 20px 20px 10px;
}
The four values affect the top-left, top-right, bottom-right, and bottom-left corners, in that order. This gives the effect shown in Figure 1.
)
Figure 1 Adding rounded corners to a box by using the border-radius property.
You can also define all of the corner radiuses using a single value, or use two values for top-left plus bottom-right, and top-right plus bottom-left:
border-radius: 10px; border-radius: 10px 20px;
In addition, you can set different values for the horizontal and vertical radius values of each corner, to create elliptical corners. This is done by providing two sets of values separated by a slash:
border-radius: 15px / 30px;
This gives the effect shown in Figure 2.
)
Figure 2 Using different values for the horizontal and vertical radiuses to create elliptical corners.
One last thing to mention is that you can specify values of individual corners using longhand properties, like so:
border-top-left-radius: 10px;