CSS border-top-left-radius property

Description

CSS border-top-left-radius property defines the length of both horizontal and vertical radii of bottom-right quarter of a box i.e. coverts sharp corners to rounded corners.

Syntax

border-top-left-radius : +XY-length | X-length Y-length

Property values

+XY-length (in px)Default

It means the length of both horizontal and vertical radii is 0 for top-left corner.

border-top-left-radius: 0px;

+XY-length (in percentage)

The length of the horizontal and vertical radii is 30% for top-left corner.

border-top-left-radius: 30%;

X-radius Y-radius (in px)

The length of horizontal and vertical radii is 40px and 20px respectively for top-left corner.

border-top-left-radius: 40px 20px;

X-radius Y-radius (in percentage)

The length of horizontal and vertical radii is 30% and 50% respectively for top-left corner.

border-top-left-radius: 30% 50%;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D