在此页

• 组成特性
• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip 特性。

border-radius property does not apply to table elements when border-collapse is collapse .

注意： As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

组成特性

此特性是下列 CSS 特性的简写：

• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius

句法

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: unset;
				

border-radius property is specified as:

• one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners.
• followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

值

radius		是 <length> 或 <percentage> denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		是 <length> 或 <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-left		是 <length> 或 <percentage> denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-left		是 <length> 或 <percentage> denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-right		是 <length> 或 <percentage> denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-right		是 <length> 或 <percentage> denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-left		是 <length> 或 <percentage> denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.

<length>

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

<percentage>

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

例如：

border-radius: 1em/5em;
/* ... is equivalent to: */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
					

border-radius: 4px 3px 6px / 2px 4px;
/* ... is equivalent to: */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;
					

形式定义

初始值	as each of the properties of the shorthand: border-top-left-radius : 0 border-top-right-radius : 0 border-bottom-right-radius : 0 border-bottom-left-radius : 0
适用于	all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
继承	no
百分比	refer to the corresponding dimension of the border box
计算值	as each of the properties of the shorthand: border-bottom-left-radius : two absolute <length> s or <percentage> s border-bottom-right-radius : two absolute <length> s or <percentage> s border-top-left-radius : two absolute <length> s or <percentage> s border-top-right-radius : two absolute <length> s or <percentage> s
动画类型	as each of the properties of the shorthand: border-top-left-radius : a length , percentage or calc(); border-top-right-radius : a length , percentage or calc(); border-bottom-right-radius : a length , percentage or calc(); border-bottom-left-radius : a length , percentage or calc();

形式句法

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
where 
<length-percentage> = <length> | <percentage>
					

范例

  border: solid 10px;
  /* the border will curve into a 'D' */
  border-radius: 10px 40px 40px 10px;
					

  border: groove 1em red;
  border-radius: 2em;
					

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
					

  border: none;
  border-radius: 40px 10px;
					

  border: none;
  border-radius: 50%;
					

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
					

  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
					

Live Samples

• Sample 1 : http://jsfiddle.net/Tripad/qnGKj/2/
• Sample 2 : http://jsfiddle.net/Tripad/qnGKj/3/
• Sample 3 : http://jsfiddle.net/Tripad/qnGKj/4/
• Sample 4 : http://jsfiddle.net/Tripad/qnGKj/5/
• Sample 5 : http://jsfiddle.net/Tripad/qnGKj/6/

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-radius' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
border-radius	Chrome 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Chrome ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 完整支持 12	Firefox 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Prior to Firefox 50, border styles of rounded corners (with border-radius ) were always rendered as if border-style was solid . This has been fixed in Firefox 50. 注意事项 To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%; . Firefox 4 also makes rounded corners clip content and images if overflow : visible is not set. 不支持 1 — 12 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 完整支持 9	Opera 完整支持 10.5 注意事项 完整支持 10.5 注意事项 注意事项 Before Opera 11.60, replaced elements with border-radius do not have rounded corners.	Safari 完整支持 5 注意事项 完整支持 5 注意事项 注意事项 Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Prior to Firefox 50, border styles of rounded corners (with border-radius ) were always rendered as if border-style was solid . This has been fixed in Firefox 50. 不支持 4 — 14 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 11	Safari iOS 完整支持 4.2 注意事项 完整支持 4.2 注意事项 注意事项 Safari ignores border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 完整支持 1.0
Elliptical borders	Chrome 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Before Chrome 4, the slash / notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; 相当于 border-radius: 40px / 10px; .	Edge 完整支持 12	Firefox 完整支持 4	IE 完整支持 9	Opera 完整支持 10.5	Safari 完整支持 3 注意事项 完整支持 3 注意事项 注意事项 Before Safari 5, the slash / notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; 相当于 border-radius: 40px / 10px; .	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 11	Safari iOS 完整支持 4.2	Samsung Internet Android 完整支持 1.0
百分比	Chrome 完整支持 8	Edge 完整支持 12	Firefox 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.	IE 完整支持 9	Opera 完整支持 11.5 注意事项 完整支持 11.5 注意事项 注意事项 The implementation of <percentage> values was buggy in Opera prior to 11.50.	Safari 完整支持 5.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 11.5	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0
4 values for 4 corners	Chrome 完整支持 4	Edge 完整支持 12	Firefox 完整支持 4	IE 完整支持 9	Opera 完整支持 10.5	Safari 完整支持 5	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 11	Safari iOS 完整支持 4.2	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• Border-radius-related CSS properties: border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius

元数据

• 最后修改： Jul 27, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Backgrounds and Borders
4. 指南

   1. Resizing background images with background-size
   2. Using multiple backgrounds
5. 特性

   1. background
   2. background-attachment
   3. background-clip
   4. background-color
   5. background-image
   6. background-origin
   7. background-position
   8. background-position-x
   9. background-position-y
   10. background-repeat
   11. background-size
   12. border
   13. border-bottom
   14. border-bottom-color
   15. border-bottom-left-radius
   16. border-bottom-right-radius
   17. border-bottom-style
   18. border-bottom-width
   19. border-color
   20. border-image
   21. border-image-outset
   22. border-image-repeat
   23. border-image-slice
   24. border-image-source
   25. border-image-width
   26. border-left
   27. border-left-color
   28. border-left-style
   29. border-left-width
   30. border-radius
   31. border-right
   32. border-right-color
   33. border-right-style
   34. border-right-width
   35. border-style
   36. border-top
   37. border-top-color
   38. border-top-left-radius
   39. border-top-right-radius
   40. border-top-style
   41. border-top-width
   42. border-width
   43. box-shadow