PUBLISHED ON: APRIL 14, 2021
CSS border-end-start-radius Property
The border-end-start-radius property in CSS refers to the logical border-radius for an element that gets mapped to a physical border-radius which depends on the direction, writing-mode, and text orientation of the element. This property styles the corners between the block-end and the inline-start sides of the element.
Syntax for border-end-start-radius property:
Following is the syntax for the border-end-start-radius property.
border-end-start-radius: length | percentage;
Example: CSS border-end-start-radius Property
In the example below, we are using the border-end-start-radius property with different curving or rounding percentages, border styles, and their different values. In this case, we have given the border-end-start-radius as 10px i.e; the bottom starting corner of the container box gets curved to 10px.
<!DOCTYPE html>
<html>
<head>
<title>Border-end-start-radius property in CSS</title>
<style type="text/css">
div {
background-color: black;
width: 110px;
height: 110px;
border-end-start-radius: 10px;
}
.exampleText {
writing-mode: horizontal-tb;
padding: 10px;
background-color: purple;
border-end-start-radius: 10px;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</p>
</div>
</body>
</html>
Output:
Example 2: CSS border-end-start-radius Property
Here in the example below, we are using the border-end-start-radius property with different curving or rounding percentages, border styles, and their different values. In this case, we have given the border-end-start-radius two values 1em and 4em i.e; the bottom starting corner of the container box gets curved to 1em horizontally and 4em vertically.
<!DOCTYPE html>
<html>
<head>
<title>Border-end-start-radius property in CSS</title>
<style type="text/css">
div {
background-color: black;
width: 110px;
height: 110px;
border-end-start-radius: 1em 4em;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: purple;
border-end-start-radius: 2em 1em;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</p>
</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
89 |
89 |
| Edge |
no |
no |
| Firefox |
66 |
66 |
| Internet Explorer |
no |
no |
| Opera |
no |
no |
| Safari |
no |
no |
| Webview Android |
89 |
89 |
| Chrome Android |
89 |
89 |
| Firefox Android |
66 |
66 |
| Opera Android |
no |
no |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the border-end-start-radius property is zero. This property is applicable to all elements and also to ::first-letter. Percentages refer to the corresponding dimensions of the border-box. The computed value for this property is the two absolute lengths or percentages. The animation type for this property is a length or a percentage or calc().
