CSS - border-end-end-radius Property

CSS border-end-end-radius property defines the radius of the corner between the block-end and inline-end sides of an element.This property is a logical border radius, which means that its value depends on the element's writing mode, direction, and text orientation.

Syntax

border-end-end-radius: 0 | length | percentage | initial | inherit;

Property Values

Value	Description
0	It shows no rounding effect. Default.
length	It defines the roundness of block-end and inline-end corner using length values.
percentage	It defines the roundness of block-end and inline-end corner using percentage values.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border End End Radius Property

The following examples explain the border-end-end-radius property with different values.

Border End End Radius with Zero Value

To not have any rounding effect at the end of the block and inline corner, we can use 0. In the following example, 0 value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 0;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <div class="rounded-box">
        No rounded corner for block-end and inline-end corner.
    </div>
</body>

</html>

Border End End Radius with Length Value

To have a rounding effect at the end of the block and inline corner, we can use length values (eg. 10px) to specify the radius. In the following example, 80px value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box1 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 80px;
        }

        .rounded-box2 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 80px 80px;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <p class="rounded-box1">
        Rounded corner for block-end and inline-end 
        corner with single value.
    </p>
    <p class="rounded-box2">
        Rounded corner for block-end and inline-end 
        corner with two values.
    </p>
</body>

</html>

Border End End Radius with Percentage Value

To have a rounding effect at the end of the block and inline corner, we can use percentage values (eg. 10%) to specify the radius. In the following example, 50% value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .rounded-box1 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 50%;
        }

        .rounded-box2 {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 50% 50%;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <p class="rounded-box1">
        Rounded corner for block-end and inline-end 
        corner with single value.
    </p>
    <p class="rounded-box2">
        Rounded corner for block-end and inline-end 
        corner with two values.
    </p>
</body>

</html>

Border End End Radius with Direction

The direction parameter in the context of border-end-end-radius determines which corner is to be rounded. In the LTR direction, the right bottom corner is rounded while in RTL direction the left bottom corner is rounded. LTR is the default direction. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #right {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 120px 60px;
            direction: ltr;
        }

        #left {
            width: 150px;
            height: 150px;
            border: 3px solid green;
            border-end-end-radius: 120px 60px;
            direction: rtl;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <p id="right">
        block-end and inline-end rounded 
        corner using direction: ltr
    </p>
    <p id="left">
        block-end and inline-end rounded 
        corner using direction: rtl
    </p>
</body>

</html>

Border End End Radius with Writing Mode

The border-end-end-radius property can be used with writing-mode: vertical-lr, it arranges text vertically from top to bottom and left to right. Similarly, with writing-mode: vertical-rl, it arranges text vertically from top to bottom and right to left. These are shown in the following example.

Example

<html>
<head>
<style>
    .rounded-box {
        width: 150px;
        height: 150px;
        border: 3px solid green;
        margin: 10px;
    }
    .top-left-lr {
        border-end-end-radius: 30%;
        writing-mode: vertical-lr;
    }
    .top-left-rl {
        border-end-end-radius: 30%;
        writing-mode: vertical-rl;
    }
</style>
</head>
<body>
    <h2>
        CSS border-end-end-radius property
    </h2>
    <div class="rounded-box top-left-lr">
        block-end and inline-end rounded 
        corner using vertical-lr.
    </div>
    <div class="rounded-box top-left-rl">
        block-end and inline-end rounded 
        corner using vertical-rl.
    </div>
</body>
</html>

Supported Browsers

Property
border-end-end-radius	89.0	89.0	66.0	15.0	75.0

css_reference.htm

Print Page