Bùi Anh Tuấn
2024-09-25T12:58:57Z
Thuộc tính border trong CSS được sử dụng để tạo đường viền xung quanh các phần tử HTML. Dưới đây là các chi tiết về cách sử dụng thuộc tính này:

Cú pháp cơ bản:

- border: [border-width] [border-style] [border-color];

-border-width: Độ dày của đường viền (có thể là giá trị cụ thể như 1px, 2em, hoặc các từ khóa như thin, medium, thick).
-border-style: Kiểu đường viền, bao gồm các giá trị như:
+ none: Không có đường viền.
+solid: Đường viền liền.
+dashed: Đường viền nét đứt.
+dotted: Đường viền nét chấm.
+double: Đường viền đôi.
+groove, ridge, inset, outset: Các kiểu viền 3D.
+border-color: Màu của đường viền (có thể là tên màu, mã màu HEX, RGB, hoặc HSL).
ví dụ :

div {
border: 2px solid red;
}

Trong ví dụ này, phần tử <div> sẽ có đường viền dày 2px, kiểu đường viền liền (solid), và màu đỏ.

Các thuộc tính con của border:
Bạn có thể sử dụng các thuộc tính con để định nghĩa chi tiết hơn cho từng phần của đường viền, chẳng hạn như:
- border-width: Độ dày của viền.
border-width: 2px;
- border-style: Kiểu của viền.
border-style: solid;
- border-color: Màu của viền
border-color: blue;
Viền từng phía:
Bạn cũng có thể đặt viền riêng biệt cho mỗi phía bằng cách sử dụng các thuộc tính sau:

border-top: Đường viền trên.
border-right: Đường viền phải.
border-bottom: Đường viền dưới.
border-left: Đường viền trái.
ví dụ :

div {
border-top: 5px dashed blue;
border-right: 2px solid green;
border-bottom: 1px dotted red;
border-left: 3px double black;
}

- Thuộc tính border-radius:
Thuộc tính này giúp làm bo tròn các góc của viền.

div {
border: 2px solid black;
border-radius: 10px;
}

Một số thuộc tính liên quan:
- border-collapse: Dùng cho bảng, chỉ định cách viền của các ô bảng được kết hợp lại.
- border-spacing: Dùng để tạo khoảng cách giữa các đường viền của bảng.
Tóm lại:
border trong CSS giúp tạo ra các kiểu viền đa dạng cho các phần tử, giúp cải thiện giao diện người dùng.

Privacy Policy | 2.31.16
Thời gian xử lý trang này hết 0,085 giây.