Trong CSS, bạn có thể sử dụng thuộc tính border
để thêm đường viền cho các phần tử HTML. Thuộc tính border
có thể được đặt với các giá trị khác nhau để kiểm soát kiểu, chiều rộng và màu sắc của đường viền. Dưới đây là thông tin tổng quan cơ bản về cách sử dụng thuộc tính border
:
css /* Set border style, width, and color */
.element {
border: 2px solid #333; /* 2px width, solid style, #333 color */
}
Trong ví dụ trên, thuộc tính border
được đặt với ba giá trị:
Độ rộng đường viền: Nó chỉ định độ rộng của đường viền. Bạn có thể sử dụng các giá trị như 1px
, 2px
, 3px
, v.v. hoặc bạn có thể sử dụng các từ khóa như thin
, medium
hoặc thick
.
Kiểu đường viền: Nó chỉ định kiểu đường viền, chẳng hạn như solid
, dashed
, dotted
, double
, v.v.
Màu đường viền: Xác định màu của đường viền. Bạn có thể sử dụng tên màu, mã hex ( #333
), giá trị RGB ( rgb(51, 51, 51)
) hoặc các cách thể hiện màu khác.
Đây là một ví dụ chi tiết hơn:
css /* Set different border properties individually */
.element {
border-width: 2px; /* Width of the border */
border-style: dashed; /* Style of the border (dashed) */
border-color: #ff0000; /* Color of the border (red) */
}
Bạn cũng có thể sử dụng thuộc tính border
với các thuộc tính viết tay như trên hoặc với thuộc tính tốc ký để đặt tất cả các thuộc tính đường viền cùng một lúc:
css /* Shorthand for setting all border properties */
.element {
border: 2px dashed #ff0000; /* Width, style, and color in one line */
}
Hãy thoải mái điều chỉnh các giá trị theo sở thích thiết kế của bạn.