CSS ความหนาของเขตติดขอบแบบตั้งแนวขวาง

คำอธิบายและวิธีใช้

border-inline คุณสมบัติเป็นลูกของคุณสมบัติต่อไปนี้:

• border-inline-width
• border-inline-style（บางครั้งจำเป็น）
• border-inline-color

ถ้าละเลยค่าสีหรือความกว้าง จะใช้ค่าเริ่มต้น

CSS ของ border-inline คุณสมบัติกับ border คุณสมบัติเหมือนกันมาก แต่ border-inline The attribute depends on the inline direction.

Note:and related CSS properties writing-mode,text-orientation and direction Define the inline direction. This affects the start and end positions of a line, as well as border-inline The effect of the attribute. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Set the style, color, and width of the border for different inline elements:

h1 {
  border-inline: 5px solid red;
}
h2 {
  border-inline: 4px dotted blue;
}
div {
  border-inline: double;
}

Try it yourself

Example 2: Combine with writing-mode attribute

The borders at the start and end positions of the inline direction are affected by writing-mode Impact of the attribute:

div {
  writing-mode: vertical-rl;
  border-inline: hotpink dashed 8px;
}

Try it yourself

CSS syntax

border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;

Attribute value

Technical details

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางแสดงการเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน。

หน้าที่เกี่ยวข้อง

ตัวเรียน:CSS ขอบเขต

อ้างอิง：CSS ความหนาของเขตติดขอบ

อ้างอิง：CSS สีของเขตติดขอบแบบตั้งแนวขวาง

อ้างอิง：CSS รูปแบบขอบฝั่งฝั่ง

อ้างอิง：CSS ความกว้างขอบฝั่ง

อ้างอิง：CSS ความหลากหลายdirection

อ้างอิง：CSS text-orientation คุณสมบัติ

อ้างอิง：CSS writing-mode คุณสมบัติ