In this section, we will learn what the border-top-left-radius property is and how to use it in CSS.

Click here to run the example of border-top-left-radius property.

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.

Notes:

• 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

See the Pen border-top-left-radius property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

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.