![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-top-left-radius Property
![CSS border-top-left-radius Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-top-left-radius.webp)
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.
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-top-left-radius Property), please comment here. I will help you immediately.