CSS Rounded Corners
CSS rounded corners property is used to create rounded corners of a rectangle HTML element or square HTML element.
Border Radius
The border-radius property is used to round the corner of an HTML element's outer border edge. To make a circular corner use a single border-radius value while to make elliptical corners, assign two radii values to the border radius to make an elliptical corner.
The border-radius is shorthand for It is the shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.
Border Radius Values:
Followings are the border radius values: length(in px,em,ex,vw,rem,mm,cm,in,ex,ch etc),%, inherit ,initial,unset
CSS3 Border Radius Properties
| Property | Description |
|---|---|
border-top-left-radius: |
To set the border-radius for the top-left corner. |
border-top-right-radius: |
To set the border-radius for the top-left corner. |
border-bottom-right-radius: |
To set the border-radius for the bottom-right corner. |
border-bottom-left-radius: |
To set the border-radius for the bottom-left corner. |
CSS Border Radius Specification
The border-radius property of CSS has one to four values.Let us discuss the basic rule regarding border-radius values.
Case 1:border-radius has 1 value
If border-radius has only one value such as
border-radius:10px; then this value will be applied to all four corners.That will be rounded all corners equally.
Source Code
.example {
border-radius: 15px;
}
Case2:border-radius has 2 value
If the border-radius has two values such as
border-radius:15px 25px; then the first value will be applied to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners.
Short Hand
Source Code
.ex {
border-radius: 15px 20px;
}
Case3:border-radius has 3 value
If border-radius has three value such as
border-radius:15px 35px 45px; then first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner.
Short Hand
Source Code
.ex {
border-radius: 15px 35px 45px;
}
Case4:border-radius has 4 value
If border-radius has three value such as
border-radius:15px 35px 45px 50px; first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner.
Source Code
.ex{
border-radius: 15px 35px 45px 50px;
}
Code Explanation
Border Radius Browser Compatibility
Chrome, Safari, Firefox 4, Opera 11, and IE9 support border-radius without any vendor prefix.
Web Tutorials
