border-block

Try it

border-block: solid;
writing-mode: horizontal-tb;

border-block: dashed red;
writing-mode: vertical-rl;

border-block: 1rem solid;
writing-mode: horizontal-tb;
direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Các thuộc tính thành phần

Thuộc tính này là dạng viết tắt cho các thuộc tính CSS sau:

• border-block-color
• border-block-style
• border-block-width

Cú pháp

border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

/* Giá trị toàn cục */
border-block: inherit;
border-block: initial;
border-block: revert;
border-block: revert-layer;
border-block: unset;

Giá trị

border-block được chỉ định với một hoặc nhiều giá trị sau, theo bất kỳ thứ tự nào:

<'border-width'>

Chiều rộng của đường viền. Xem border-width.

<'border-style'>

Kiểu đường của đường viền. Xem border-style.

<color>

Màu của đường viền.

Mô tả

border-block có thể được dùng để đặt các giá trị cho một hoặc nhiều trong số border-block-width, border-block-style, và border-block-color, đặt cả đầu và cuối theo chiều khối cùng lúc. Các đường viền vật lý mà nó ánh xạ phụ thuộc vào chế độ viết, hướng và hướng văn bản của phần tử. Nó tương ứng với border-top và border-bottom hoặc border-right và border-left tùy thuộc vào các giá trị được xác định cho writing-mode, direction, và text-orientation.

Các đường viền theo chiều còn lại có thể được đặt bằng border-inline, đặt border-inline-start và border-inline-end.

Định nghĩa chính thức

Cú pháp chính thức

border-block = 
  <'border-block-start'>  

<border-block-start> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

Ví dụ

Đường viền với văn bản dọc

HTML

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

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block: 5px dashed blue;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• CSS Logical Properties and Values
• Thuộc tính này ánh xạ đến một trong các thuộc tính đường viền vật lý: border-top, border-right, border-bottom, hoặc border-left.
• writing-mode, direction, text-orientation