border-top-left-radius

语法

/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* the corner is an ellipsis */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

属性值：

radius

可以是 <length> 或者 <percentage>，表示左上角边框的圆角半径。

horizontal

可以是 <length> 或者 <percentage>，表示椭圆的水平半长轴在被用作边框左上角的半径。

vertical

可以是 <length> 或者 <percentage>，表示椭圆的垂直半长轴在被用作边框左上角的半径。

取值

<length>

<length> 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。

<percentage>

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。

Formal syntax

border-top-left-radius = 
  <border-radius>  

<border-radius> = 
  <slash-separated-border-radius-syntax>  |
  <legacy-border-radius-syntax>           

<slash-separated-border-radius-syntax> = 
  <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?  

<legacy-border-radius-syntax> = 
  <length-percentage [0,∞]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>  

示例

div {
  border-top-left-radius: 40px 40px;
}

div {
  border-top-left-radius: 40px 20px;
}

div
  border-top-left-radius: 40%;
}

div {
  border-top-left-radius: 40%;
}

div {
  border-top-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}

规范

浏览器兼容性

参见

• border-radius 相关 CSS 属性：border-radius, 其他边角属性： border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.