Trong CSS, thuộc tính border được sử dụng để tạo viền xung quanh các phần tử HTML. Viền có thể được tạo ra bằng cách sử dụng các thuộc tính như border-width, border-style, và border-color. Dưới đây là một số ví dụ về cách sử dụng thuộc tính border trong CSS:
- Độ Rộng Viền (Border Width): Điều chỉnh độ dày của viền.
css
/* Đặt độ rộng viền là 1px */
border-width: 1px;
/* Đặt độ rộng viền khác nhau cho từng cạnh (trên, phải, dưới, trái) */
border-width: 2px 1px 3px 1px; /* trên, phải, dưới, trái */
- Kiểu Viền (Border Style): Điều chỉnh kiểu của viền (ví dụ: solid, dashed, dotted).
css
/* Đặt kiểu viền là nét đứt */
border-style: dashed;
- Màu Viền (Border Color): Điều chỉnh màu sắc của viền.
css
/* Đặt màu viền là màu đỏ */
border-color: #ff0000;
- Viền Cho Các Cạnh Cụ Thể (Border on Specific Sides): Điều chỉnh viền cho từng cạnh riêng lẻ.
css
/* Đặt viền cho cạnh trên là 2px, kiểu nét đứt, màu xanh lá cây */
border-top: 2px dashed #00cc00;
- Viền Bo Tròn (Rounded Borders): Tạo viền có góc bo tròn.
css
/* Tạo viền có góc bo tròn 10px */
border-radius: 10px;
/* Tạo viền có góc bo tròn khác nhau cho từng góc (trên trái, trên phải, dưới phải, dưới trái) */
border-radius: 5px 10px 15px 20px; /* trên trái, trên phải, dưới phải, dưới trái */
- Gộp Nền Và Viền (Background and Border): Điều chỉnh cách nền và viền hoạt động cùng nhau.
css
/* Tạo viền và nền cho phần tử */
border: 2px solid #333;
background-color: #f7f7f7;
Đây chỉ là một số ví dụ cơ bản về cách sử dụng thuộc tính border trong CSS. Bạn có thể kết hợp các thuộc tính này để tạo ra các hiệu ứng viền đa dạng và phức tạp cho các phần tử trên trang web của bạn.