Adding Rounded Corners in CSS
You may add rounded corners to your CSS3-based elements, like a border or button.
You can change the radius to increase or decrease the rounding of the corners. This is a
styles definition rounding of each corner, it lets you individually round each of the 4
corners (still not supported in IE).
[View All Snippets]
[View All Snippets]
Show Plain Text »
Result 1:
Result 2:
- <style type="text/css">
- .round1 {
- border:1px solid #c1c13a;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px; /* future proofing */
- -khtml-border-radius: 10px; /* for old Konqueror browsers */
- }
- .round2 {
- border:1px solid #c1c13a;
- -moz-border-radius: 10px 10px 0 0;
- -webkit-border-radius: 10px 10px 0 0;
- border-radius: 10px 10px 0 0; /* future proofing */
- -khtml-border-radius: 10px 10px 0 0; /* for old Konqueror browsers */
- }
- </style>
Result 1:
This is a DIV with all rounded corners.
Result 2:
This is a DIV with 2 rounded corners.