CSS border-top-left-radius Property

CSS border-top-left-radius Property

The border-top-left-radius property in CSS is used to round the top-left corner of an element. It controls the curvature of the top-left corner, allowing you to create rounded corners for that specific corner.

1. Syntax

selector {
  border-top-left-radius: value;
}

Value	Description
length	Specifies the radius of the top-left corner, such as px, em, rem, etc.
%	Specifies the radius as a percentage of the element's width or height.
inherit	Inherits the top-left radius from the parent element.

2. Example – Using border-top-left-radius

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-top-left-radius: 20px;
}

<div>
  This div has a rounded top-left corner with a radius of 20px.
</div>

✅ The top-left corner of the <div> will have a radius of 20px, giving it a rounded appearance.

3. Example – Using Percentages for border-top-left-radius

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-top-left-radius: 50%;
}

✅ The top-left corner of the <div> will have a rounded appearance, and the radius will be 50% of the element's height, making the corner more elliptical.

4. Example – Rounding Multiple Corners

You can round multiple corners at once. For instance, rounding the top-left and bottom-right corners:

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

✅ The top-left and bottom-right corners of the <div> will have 20px rounded corners, while the other two corners remain square.

5. Best Practices

✔ Use border-top-left-radius when you want to round the top-left corner specifically.
✔ For rounding multiple corners, you can use the shorthand border-radius property.
✔ When working with responsive designs, using percentages can help maintain proportional rounding, especially when the element's dimensions change.