CSS border-radius Property
By default, blocks have 90-degree rectangular corners.
That isn't always the most aesthetically pleasing design, though.
To address this, CSS gives us the border-radius property. This property gives us rounded corners.
The corners can be circular or elliptical.
Syntax -
|
border-radius: horizontal-radius vertical-radius
|
Now we will see the values with their descriptions -
|
Value
|
Description
|
|
length
|
This defines the radius of the corners, and it has default value 0.
|
|
%
|
Defines the shape of border corners in percentage
|
where the radius values are set as lengths.
A single length value defines the radius of all corners, or each can be specified one by one from top-left, top-right, bottom-right, and finally bottom-left.
Now we will see Example -
Example -
.html file -
.css file -
Output -
