CSS border-top-left-radius Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-top-left-radius property in CSS is used to round the top-left corner of an element.

This property is particularly useful when you want to create a smooth, rounded corner effect on a box or container. By adjusting the radius, you can control how curved the corner appears, adding a touch of visual appeal to your design.

💡 Syntax

The syntax for the border-top-left-radius property is straightforward. You can specify a single value to create a uniform curve, or you can specify two values to control the horizontal and vertical radii separately.

Syntax

Copied

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

radius: Can be a length (e.g., px, em, etc.), percentage (%), or a combination of two values (horizontal radius and vertical radius).

🎛️ Default Value

The default value of the border-top-left-radius property is 0, which means no rounding is applied to the top-left corner.

🏠 Property Values

Value	Description
length	Specifies the radius of the corner. For example, 10px will create a rounded corner with a radius of 10 pixels.
percentage	Specifies the radius as a percentage of the element's dimensions. For example, 50% will create a rounded corner that is half the width and height of the element.
two values	The first value defines the horizontal radius, and the second value defines the vertical radius. For example, 10px 20px will create a corner with a horizontal radius of 10 pixels and a vertical radius of 20 pixels.

📄 Example

In this example, we'll round the top-left corner of a box to create a smooth, curved effect.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-top-left-radius Example</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border-top-left-radius: 50px;
    }
  </style>
</head>
<body>
  <h1>Box with Rounded Top-Left Corner</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The border-top-left-radius property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. You can confidently use this property in your web projects knowing that it will work seamlessly for most users.

🎉 Conclusion

The border-top-left-radius property is a simple yet powerful tool for adding rounded corners to your elements.

Whether you're looking to soften the look of a container or create a unique design element, this property allows you to fine-tune the curvature of the top-left corner. Experiment with different values to achieve the desired visual effect and enhance the overall aesthetics of your website.