In this section, we will learn what the border-top-left-radius property is and how to use it in CSS.
CSS border-top-left-radius Property Definition and Usage
When creating an element in HTML, by default it has 4 square corners. But this is the default behavior and with the help of CSS we can change the shape of corners.
For example, the border-top-left-radius property focuses on the top left corner of an element.
Basically, with this property we can change the radius of this corner and create a round shape instead of having a square corner.
CSS border-top-left-radius Property Syntax
border-top-left-radius: length|% [length|%]|initial|inherit;
CSS border-top-left-radius Property Value
This property takes two values by default:
- The first value defines the top border radius.
- The second value defines the left border radius.
- Any relative or absolute units that are supported in CSS can be used as the value of this property.
- If we only apply one value and omit the second one, browsers automatically copy the first value and use it for the second one as well.
- By default, both values are set to 0 and as a result, we will have a sharp corner for elements.
Example: border-top-left-radius property in CSS
How Does CSS border-top-left-radius Property Work?
In this example, the value for this property is set to 5em and 7em. This means the top border radius is set to 5em and left border radius to 7em.