CSS - border-end-end-radius 属性

CSS border-end-end-radius 属性定义了元素的块级结尾和内联结尾边之间角的圆角半径。此属性是逻辑边框半径，这意味着它的值取决于元素的书写模式、方向和文本方向。

语法

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

属性值

值	描述
0	没有圆角效果。默认值。
长度值	使用长度值定义块级结尾和内联结尾角的圆度。
百分比	使用百分比值定义块级结尾和内联结尾角的圆度。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS border-end-end-radius 属性示例

以下示例说明了使用不同值的 border-end-end-radius 属性。

值为零的 border-end-end-radius

为了在块级和内联角的末尾不产生任何圆角效果，可以使用 0。在以下示例中，使用了 0 值。

示例

<!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

为了在块级和内联角的末尾产生圆角效果，可以使用长度值（例如 10px）来指定半径。在以下示例中，使用了 80px 值。

示例

<!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

为了在块级和内联角的末尾产生圆角效果，可以使用百分比值（例如 10%）来指定半径。在以下示例中，使用了 50% 值。

示例

<!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

在 border-end-end-radius 的上下文中，direction 参数决定要圆哪个角。在 LTR 方向上，右下角是圆的，而在 RTL 方向上，左下角是圆的。LTR 是默认方向。这些在以下示例中显示。

示例

<!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

border-end-end-radius 属性可以与 writing-mode: vertical-lr 一起使用，它将文本垂直排列为从上到下，从左到右。类似地，使用 writing-mode: vertical-rl，它将文本垂直排列为从上到下，从右到左。这些在以下示例中显示。

示例

<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>

支持的浏览器

属性
border-end-end-radius	89.0	89.0	66.0	15.0	75.0

css_properties_reference.htm

打印页面