How Do You Make Border Rounded With CSS3?
Printable View
How Do You Make Border Rounded With CSS3?
Yes, in CSS3, there is a <border-radius> property which allows creating an element with rounded corners. We can apply the same style to all the sides and make the corners round.
The <border-radius> property has four individual properties <border-top-left-radius>, <border-top-right-radius>, <border-bottom-left-radius> and <border-bottom-right-radius>.
By border-radius any element can be given rounded corners.
Following is the syntax :
border-radius: 10px; or border-radius: 50%;
where 0px for min and 100px for max rounded corners. And 50% for complete circle and using % is better than px.
The border-radius property is shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.