Thuộc tính border-block-width đặt chiều rộng đường viền của một phần tử theo hướng block. Nó xác định độ dày của viền block-start và block-end, thích ứng với chế độ viết. Thuộc tính này đảm bảo kiểu viền nhất quán cho các phần tử, bất kể hướng luồng văn bản.
Syntax:
border-block-width: width;
Property values:
- width: Thuộc tính này giữ chiều rộng của đường viền.
Các ví dụ dưới đây minh họa thuộc tính border-block-width trong CSS:
Example 1: Trong ví dụ này, chúng ta sử dụng border-block-width để đặt chiều rộng viền khối. Nó tương phản với viền nội tuyến nét đứt để minh họa hiệu ứng của nó. Hiệu ứng này nằm trong một phần tử div có kiểu.
html<!DOCTYPE html>
<html>
<head>
<title>CSS border-block-width Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border: 5px dashed cyan;
border-block-width: 2px;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS border-block-width Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Output:
Example 2: Trong ví dụ này, chúng ta dùng border-block-width để đặt viền cyan liền nét. Chiều rộng khối là 2px bên trong div màu tím.
html<!DOCTYPE html>
<html>
<head>
<title>CSS border-block-width Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border: 5px solid cyan;
border-block-width: 2px;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-block-width Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Output:
Supported Browsers:
Các trình duyệt được hỗ trợ bởi thuộc tính border-block-width được liệt kê dưới đây: