Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS border-end-end-radius Property

The border-end-end-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-end sides of the element.

Syntax

border-end-end-radius: length | percentage;

Example: CSS border-end-end-radius Property

Here in the example below, we are using the border-end-end-radius property with different curving or rounding percentages, border styles, and their different values. In this case, we have given the border-end-end radius as '10px' i.e; the bottom end corner of the container box gets curved to 10px.

<!DOCTYPE html>
<html>

<head>
	<title>Border-end-end-radius property in CSS</title>
	<style type="text/css">
		div {
		  background-color: red;
		  width: 150px;
		  height: 150px;
		  border-end-end-radius: 10px;
		}
		
		.exampleText {
		  writing-mode: vertical-rl;
		  padding: 10px;
		  background-color: pink;
		  border-end-end-radius: 10px;
		}
	</style>
</head>

<body>
	<div>
		<p class="exampleText">Welcome To Study Tonight</p>
	</div>
</body>

</html>

Output

Example: CSS border-end-end-radius Property

Here in the example below, we are using the border-end-end-radius property with different curving or rounding percentages, border styles and their different values. In this case, we have given the border-end-end-radius with two values '2em 3em' i.e; the bottom end corner of the container box gets curved to 2em horizontally and 3em vertically.

<!DOCTYPE html>
<html>
<head>
	<title>Border-end-end-radius property in CSS</title>
	<style type="text/css">
		div {
		  background-color: red;
		  width: 150px;
		  height: 150px;
		  border-end-end-radius: 2em 3em;
		}
		
		.exampleText {
		  writing-mode: vertical-rl;
		  padding: 10px;
		  background-color: pink;
		  border-end-end-radius: 1em 2em;
		}
	</style>
</head>
<body>
	<div>
		<p class="exampleText">Welcome To Study Tonight</p>
	</div>
</body>
</html>

Output

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. 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-end-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().