Post
Ask Question

Easy Rounded Corners using CSS3

Easy Rounded Corners using CSS3

 
This article takes a look at the css3 border-radius property which allows developers to easily create rounded corners in their web pages. Prior to css3, developers needed to use approaches such as using corner images to give an illusion of rounded corners or arranging multiple div tags to give a smooth rounded look.
 

Syntax

  
Setting rounded corners using css3 is easier than 1-2-3. Just set the "border-radius" property and take a look at the results. As with any other "new" properties/features, you do need to ensure client browser support.
 
#roundcnr1 {
 border-radius: 12px;
 }
 
In previous Firefox versions, you needed to specify the -moz- prefix for Firefox browsers ( -moz-border-radius: ...). The current/newer versions of firefox work without needing the -moz- prefix.
 
Sample in action
 
css3rncnr1.jpg
 
Source Code
  1. <!DOCTYPE html>  
  2. <head>  
  3.     <style>  
  4. #roundcnr1   
  5. {  
  6.  -moz-border-radius: 12px;  
  7.  border-radius:   
  8. 12px;  
  9. border-style: solid;  
  10.   border-color: #996600;    
  11. border-width: 1px;  
  12.  }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. Div without   
  17. Rounded corners  
  18.     <BR/>  
  19.     <br/>  
  20.     <div style="border: 1px solid   
  21. black;width:100px;" >  
  22. Hello - without rounded borders   
  23. </div>  
  24.     <BR/>  
  25. Div with Rounded   
  26. corners  
  27.     <br/>  
  28.     <BR/>  
  29.     <div style="border: 1px solid   
  30. black;border-radius:10px;width:100px;" >  
  31. Hello - with rounded borders   
  32. </div>  
  33.     <BR/>  
  34. Table without Rounded corners  
  35.     <br/>  
  36.     <BR/>  
  37.     <table   
  38. style="border: 1px solid black;">  
  39.         <tr>  
  40.             <td>Row1 Col1   
  41. </td>  
  42.             <td>Row1 Col2   
  43. </td>  
  44.         </tr>  
  45.         <tr>  
  46.             <td>Row2 Col1   
  47. </td>  
  48.             <td>Row2 Col2 </td>  
  49.         </tr>  
  50.     </table>  
  51.     <BR/>  
  52.   
  53. Table with Rounded corners  
  54.     <br/>  
  55.     <BR/>  
  56.     <table   
  57. style="border: 1px solid   
  58. black;border-radius:4px">  
  59.         <tr>  
  60.             <td>Row1 Col1   
  61. </td>  
  62.             <td>Row1 Col2   
  63. </td>  
  64.         </tr>  
  65.         <tr>  
  66.             <td>Row2 Col1   
  67. </td>  
  68.             <td>Row2 Col2 </td>  
  69.         </tr>  
  70.     </table>  
  71.     <br/>  
  72. </body>  
Source Code for Sample 1
 
Note that in the above sample, I have just added inline styles for the sake of brevity. You can also specify a CSS file containing the styles.
 

Additional Customizations

 
You can specify separate values for each of the 4 corners using the border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius properties.
 
You can also specify 2 radii values for each corner - this will result in an elliptical corner (arc-shaped).
  
So now you have 8 combinations of radii values that can be set. The easiest is providing the 1 value which will be applied to all the 8 properties. You can customize to the level of providing each of the 8 values individually. A concise shorthand representation is available for ease-of-setup using the following format
  
An alternative syntax would be a shorthand
 
(Top=T, Bottom=B, Left=L, Right=R
H=Horizontal radius, V=Vertical radius)
border-radius: HTL HTR HBL HBR / VTL VTR VBL VBR
 
Example 
  1. border-radius: 2px 5px 3px 1px / 7px 4px 17px 6px;  
Sample in action
 
css3rncnr2.jpg
 
Source Code
  1.  Table2 with Rounded corners  
  2. <br/>  
  3. <BR/>  
  4. <table   
  5. style="border: 1px solid black;border-radius: 2px 5px 3px 1px / 7px 4px 17px   
  6. 6px;">  
  7.     <tr>  
  8.         <td>Row1 Col1 </td>  
  9.         <td>Row1 Col2   
  10. </td>  
  11.     </tr>  
  12.     <tr>  
  13.         <td>Row2 Col1   
  14. </td>  
  15.         <td>Row2 Col2 </td>  
  16.     </tr>  
  17. </table>  
Units: The units can be specified as length (px) or percentage can be used.
 

Conclusion

 
In this article, we saw how easy it is to render custom rounded corners using a single css3 property. We took a look at the power and flexibility of the border-radius.
 
Happy Coding!


Similar Articles