在此页

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

border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width ，或 border-left-width ，和 border-right-width property depending on the values defined for writing-mode , direction ，和 text-orientation .

/* <'border-width'> values */
border-block-width: 5px;
border-block-width: thick;
					

The border width in the other dimension can be set with border-inline-width , which sets border-inline-start-width ，和 border-inline-end-width .

句法

值

<'border-width'>

The width of the border. See border-width .

形式定义

初始值	medium
适用于	所有元素
继承	no
百分比	logical-width of containing block
计算值	absolute length; 0 if the border style is none or hidden
动画类型	discrete

形式句法

<'border-top-width'>
					

范例

Border width with vertical text

HTML

<div>
  <p class="exampleText">Example text</p>
</div>
					

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}
.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-width: 5px;
}
					

Results

规范

规范	状态	注释
CSS Logical Properties and Values Level 1 The definition of 'border-block-width' 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-block-width	Chrome 完整支持 69	Edge 完整支持 79	Firefox 完整支持 66	IE 不支持 No	Opera 完整支持 56	Safari 不支持 No	WebView Android 完整支持 69	Chrome Android 完整支持 69	Firefox Android 完整支持 66	Opera Android 完整支持 48	Safari iOS 不支持 No	Samsung Internet Android 完整支持 10.0

图例

完整支持

完整支持

不支持

不支持

另请参阅

• This property maps to one of the physical border properties: border-top-width , border-right-width , border-bottom-width ，和 border-left-width
• writing-mode , direction , text-orientation

元数据

• 最后修改： Oct 20, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Logical Properties
4. 指南

   1. Basic concepts of Logical Properties and Values
   2. Logical properties for floating and positioning
   3. Logical properties for margins, borders and padding
   4. Logical properties for sizing
5. 特性

   1. block-size
   2. border-block
   3. border-block-color
   4. border-block-end
   5. border-block-end-color
   6. border-block-end-style
   7. border-block-end-width
   8. border-block-start
   9. border-block-start-color
   10. border-block-start-style
   11. border-block-start-width
   12. border-block-style
   13. border-block-width
   14. border-end-end-radius
   15. border-end-start-radius
   16. border-inline
   17. border-inline-color
   18. border-inline-end
   19. border-inline-end-color
   20. border-inline-end-style
   21. border-inline-end-width
   22. border-inline-start
   23. border-inline-start-color
   24. border-inline-start-style
   25. border-inline-start-width
   26. border-inline-style
   27. border-inline-width
   28. border-start-end-radius
   29. border-start-start-radius
   30. inline-size
   31. inset
   32. inset-block
   33. inset-block-end
   34. inset-block-start
   35. inset-inline
   36. inset-inline-end
   37. inset-inline-start
   38. margin-block
   39. margin-block-end
   40. margin-block-start
   41. margin-inline
   42. margin-inline-end
   43. margin-inline-start
   44. max-block-size
   45. max-inline-size
   46. min-block-size
   47. min-inline-size
   48. padding-block
   49. padding-block-end
   50. padding-block-start
   51. padding-inline
   52. padding-inline-end
   53. padding-inline-start