Thuộc tính border-block trong CSS cho phép bạn đặt đường viền cho phần block-start và block-end. Bạn có thể dùng một khai báo duy nhất cho thuộc tính này. Thuộc tính này hữu ích khi áp dụng đường viền cho các phần tử. Nó dựa trên chế độ viết của chúng giúp thích ứng với hướng văn bản khác nhau.
Cú pháp:
border-block: border-width | border-style | border-color;
Giá trị thuộc tính:
- border-width: Giá trị thuộc tính này chứa độ rộng của đường viền.
- border-style: Thuộc tính này chứa kiểu đường viền như dashed, solid,...
- border-color: Thuộc tính này chứa màu của đường viền.
Các ví dụ về thuộc tính border-block trong CSS
Dưới đây là các ví dụ về cách sử dụng thuộc tính border-block trong CSS.
Ví dụ 1: Đường viền liền nét với border-block
Chúng ta sẽ đặt một đường viền liền nét, độ rộng 5px và màu vàng cho phần block-start và block-end. Phần tử div sẽ được sử dụng trong ví dụ này.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS border-block Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border-block: 5px solid yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS border-block Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Kết quả:
Ví dụ 2: Đường viền nét đứt với border-block
Trong ví dụ này, chúng ta áp dụng kiểu đường viền nét đứt bằng cách sử dụng thuộc tính border-block.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS border-block Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border-block: 5px dashed yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS border-block Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Kết quả:
