![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-top-right-radius Property
![CSS border-top-right-radius Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-top-right-radius.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-top-right-radius
property in CSS is used to round the top-right corner of an element's border.
This property allows you to create visually appealing elements by applying a curved edge to the top-right corner of elements like buttons, boxes, or images. The radius of the curve can be adjusted to achieve various styles, ranging from subtle rounding to a full circle.
💡 Syntax
The syntax for the border-top-right-radius
property is simple and flexible. You can specify the radius using different units such as pixels (px), percentages (%), or em units.
element {
border-top-right-radius: value;
}
- value: Specifies the radius of the top-right corner. It can be a length (e.g., 10px) or a percentage (e.g., 50%).
🎛️ Default Value
The default value of the border-top-right-radius
property is 0. This means that by default, there is no rounding applied to the top-right corner of an element.
🏠 Property Values
Value | Description |
---|---|
length | A length value, such as 10px or 1em, that defines the radius of the corner. |
percentage | A percentage value, such as 50%, which defines the radius relative to the element's width or height. |
initial | Sets the property to its default value (0). |
inherit | Inherits the border-top-right-radius value from its parent element. |
📄 Example
In this example, we'll apply a border-top-right-radius
to a box element, rounding the top-right corner by 20 pixels.
<!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-right-radius Example</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
border-top-right-radius: 20px;
}
</style>
</head>
<body>
<h1>Box with Rounded Top-Right Corner</h1>
<div class="box"></div>
</body>
</html>
🖥️ Browser Compatibility
The border-top-right-radius
property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. As with any CSS property, it is advisable to test your design across different browsers to ensure consistent rendering.
🎉 Conclusion
The border-top-right-radius
property is a useful tool for adding subtle or pronounced rounding to the top-right corner of an element's border.
Whether you're designing buttons, containers, or other UI elements, this property allows you to enhance the visual appeal of your designs with ease. Experiment with different radius values to find the perfect fit for your web projects.
👨💻 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-right-radius Property), please comment here. I will help you immediately.