​x
 
<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-color: lightblue; /* 背景颜色为浅蓝色 */
  height: 100px; /* 高度为 100 像素 */
  width: 200px; /* 宽度为 200 像素 */
  border-end-end-radius: 50px; /* 块结束与行内结束交角的圆角半径为 50 像素 */
}
​
#example2 {
  background-color: lightblue; /* 背景颜色为浅蓝色 */
  height: 100px; /* 高度为 100 像素 */
  width: 200px; /* 宽度为 200 像素 */
  border-end-end-radius: 50px 20px; /* 块结束与行内结束交角的椭圆圆角，水平半径为 50 像素，垂直半径为 20 像素 */
}
​
#example3 {
  background-color: lightblue; /* 背景颜色为浅蓝色 */
  height: 100px; /* 高度为 100 像素 */
  width: 200px; /* 宽度为 200 像素 */
  border-end-end-radius: 50%; /* 块结束与行内结束交角的圆角半径为 50% */
  direction: rtl; /* 文本方向为从右到左 */
}  
​
#example4 {
  background-color: lightblue; /* 背景颜色为浅蓝色 */
  height: 100px; /* 高度为 100 像素 */
  width: 200px; /* 宽度为 200 像素 */
  border-end-end-radius: 50%; /* 块结束与行内结束交角的圆角半径为 50% */
  writing-mode: vertical-rl; /* 书写模式为从右到左的垂直方向 */
}
</style>
</head>
<body>
​
<h1>border-end-end-radius属性</h1>
<p>border-end-end-radius 属性定义了元素块结束边与内联结束边之间交角的圆角半径。</p>
​
<div id="example1">
  <p>border-end-end-radius: 50px;</p>
</div>
<br>
​
<div id="example2">
  <p>border-end-end-radius: 50px 20px;</p>
</div>
<br>
​
<div id="example3">
  <p>border-end-end-radius: 50% and direction: rtl</p>
</div>
<br>
​
<div id="example4">
  <p>border-end-end-radius: 50% and writing mode: vertical-rl;</p>
</div>
​
</body>
</html>
​