• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > border-radius Set of Properties

12.14. border-radius Set of Properties

Up to now we have looked at all of the border properties first introduced under CSS1 and CSS2 that control the look of the sides of the border. The proposed CSS3 borders module takes the next natural step and provides a set of properties giving you more control over how “rounded” the corners are displayed by using the border-radius set of properties.

There are five border-radius properties: four controlling each specific corner and one shortcut property that governs them all. Beginning with the top-left corner and moving clockwise, the individual properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-leftradius. The shortcut property for them all is border-radius. These properties all govern the “roundedness” of a corner by using a pair of values that describe the radius of an ellipse. The first value sets the horizontal radius (the distance “in”), and the second value sets the vertical radius (the distance from the top or bottom). If the values are set to 0, you get the default square border edge. The greater the value of the ellipse you create, the more rounded the border will be. If only one value is used instead of two, it will be applied equally to both the horizontal and vertical values, producing a more circular, rather than elliptical, edge. (The examples that follow use circularly rounded corners — at the time of writing the specification does not say how dual values should be separated, although it will likely either use a comma or space to separate each value from another; single values are used here, since they should prove to be valid code.)


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint