CSS border-top-left-radius

The border-top-left-radius property in CSS is used to define the radius of the top left corner of an element's border. This property allows you to create rounded corners for an element's border, giving it a more visually appealing appearance.

The syntax for the border-top-left-radius property is:


.element {
  border-top-left-radius: value;
}

Where value can be either a length value (such as px, em, rem, etc.) or a percentage value.

Result:

This is an example element with a top left border radius of 20px.

In the example above, we have applied a border-top-left-radius of 20px to the element, giving it a rounded top left corner with a radius of 20 pixels.

You can also specify different values for the horizontal and vertical radii of the border corner by using the border-top-left-radius property with two values:


.element {
  border-top-left-radius: horiz_value vert_value;
}

Result:

This is an example element with a top left border radius of 20px horizontally and 10px vertically.

In the example above, we have applied a border-top-left-radius with two values, 20px for the horizontal radius and 10px for the vertical radius, giving the top left corner a different curvature on the x and y axes.

By using the border-top-left-radius property, you can easily create rounded corners for your elements and enhance the overall design of your website.