Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
5. Introduction to Cascading Style Sheets™ (CSS): Part 2 > 5.3. Rounded Corners
5.3. Rounded Corners
The border-radius property allows you to add rounded corners to an element (Fig. 5.2). In this example, we create two rectangles with solid Navy borders. For the first rectangle, we set the border-radius to 15px (line 17). This adds slightly rounded corners to the rectangle. For the second rectangle, we increase the border-radius to 50px (line 27), making the left and right sides completely round. Any border-radius value greater than half of the shortest side length produces a completely round end. You can also specify the radius for each corner with border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius.
 1   <!DOCTYPE html>
 2
 3   <!-- Fig. 5.2: roundedcorners.html -->
 4   <!-- Using border-radius to add rounded corners to two elements. -->
 5   <html>
 6      <head>
 7         <meta charset = "utf-8">
 8         <title>Rounded Corners</title>
 9         <style type = "text/css">
10Â Â Â Â Â Â Â Â Â Â Â Â div
11Â Â Â Â Â Â Â Â Â Â Â Â {
12Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â border: 3px solid navy;
13Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â padding: 5px 20px;
14Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â background: lightcyan;
15Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â width: 200px;
16Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â text-align: center;
17Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â border-radius: 15px; /* adding rounded corners */
18Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â margin-bottom: 20px;
19Â Â Â Â Â Â Â Â Â Â Â Â }
20Â Â Â Â Â Â Â Â Â Â Â Â #round2
21Â Â Â Â Â Â Â Â Â Â Â Â {
22Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â border: 3px solid navy;
23Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â padding: 5px 20px;
24Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â background: lightcyan;
25Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â width: 200px;
26Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â text-align: center;
27Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â border-radius: 50px; /* increasing border-radius */
28Â Â Â Â Â Â Â Â Â Â Â Â }
29Â Â Â Â Â Â Â Â Â </style>
30Â Â Â Â Â Â </head>
31Â Â Â Â Â Â <body>
32Â Â Â Â Â Â Â Â Â <div>The border-radius property adds rounded corners
33Â Â Â Â Â Â Â Â Â Â Â Â to an element.</div>
34Â Â Â Â Â Â Â Â Â <div id = "round2">Increasing the border-radius rounds the corners
35Â Â Â Â Â Â Â Â Â Â Â Â of the element more.</div>
36Â Â Â Â Â Â </body>
37Â Â Â </html>