Nếu bạn muốn tạo viền cho phần tử HTML nhưng chưa biết cách, thì Border CSS chính là công cụ không thể thiếu. Vậy Border CSS là gì? Làm thế nào để điều chỉnh độ dày, kiểu và màu sắc đường viền giúp website trở nên sinh động và chuyên nghiệp hơn. Cùng LANIT khám phá cách sử dụng Border CSS hiệu quả trong bài viết dưới đây nhé!
Border CSS là gì?
Border CSS là thuộc tính dùng để tạo đường viền (border) xung quanh các phần tử HTML như div, p, table, hoặc img. Nó cho phép bạn tùy chỉnh độ dày, kiểu viền, màu sắc và vị trí của đường viền để làm nổi bật nội dung hoặc phân tách các khu vực trên trang web.
Ví dụ cú pháp cơ bản của Border CSS:
selector {
border: 2px solid #000;
}
Trong đó:
2px: Độ dày đường viền.
Solid: Kiểu đường viền (liền nét).
#000: Màu đen cho đường viền
Thuộc tính của border CSS
Border CSS bao gồm nhiều thuộc tính giúp bạn kiểm soát chi tiết từng phần của đường viền:
| Thuộc tính | Mô tả | Ví dụ |
| border-width | Độ dày của đường viền | border-width: 3px; |
| border-style | Kiểu viền: solid, dotted, dashed, double, groove, ridge, inset, outset, none | border-style: dashed; |
| border-color | Màu đường viền | border-color: red; |
| border-radius | Bo tròn các góc đường viền | border-radius: 10px; |
| border | Viết gộp 3 thuộc tính trên | border: 1px solid blue; |
Hướng dẫn thu gọn border trong bảng
Khi tạo bảng (<table>), các ô (<td>, <th>) thường có viền tách biệt, gây cảm giác rời rạc.
CSS cung cấp thuộc tính border-collapse giúp gộp các đường viền liền nhau thành một đường duy nhất.
Ví dụ:
table {
border-collapse: collapse;
border: 1px solid #000;
}
td, th {
border: 1px solid #000;
padding: 8px;
}
Khai báo định dạng Border CSS
Border CSS có thể được khai báo theo 2 cách chính: đầy đủ (tách từng thuộc tính) và rút gọn (gộp tất cả trong một dòng). Mỗi cách có ưu điểm riêng tùy vào mức độ kiểm soát mà bạn cần đối với từng cạnh của phần tử.
Cách 1: Khai báo đầy đủ từng thuộc tính
Nếu bạn muốn kiểm soát chi tiết từng phần của đường viền, hãy sử dụng cách này:
IIdiv {
border-width: 4px; /* Độ dày của viền */
border-style: dashed; /* Kiểu viền: dashed = nét đứt */
border-color: #ff6600; /* Màu cam */
}
Giải thích:
- border-width: Có thể đặt theo đơn vị px, em, hoặc từ khóa như thin, medium, thick.
- border-style: Gồm các kiểu viền phổ biến như:
- solid: liền nét
- dashed: gạch đứt
- dotted: chấm tròn
- double: hai đường song song
- none hoặc hidden: ẩn viền
- border-color: Hỗ trợ giá trị màu dưới dạng tên màu, HEX, RGB, HSL…
Cách 2: Khai báo rút gọn (Shorthand)
Nếu bạn chỉ cần đường viền đồng nhất, có thể viết gọn trong một dòng:
div {
border: 2px solid #333;
}
Cấu trúc viết rút gọn:
border: [border-width] [border-style] [border-color];
Cách viết rút gọn giúp mã CSS ngắn gọn, dễ đọc và hiệu suất tải trang tốt hơn khi bạn quản lý nhiều phần tử có viền giống nhau.
Hướng dẫn thiết lập đường viền ở các vị trí khác nhau
Trong thực tế, bạn không phải lúc nào cũng cần viền ở cả bốn cạnh. CSS cho phép thiết lập viền riêng cho từng cạnh (trên, phải, dưới, trái) với cú pháp linh hoạt.
Thiết lập viền cho từng cạnh
| Thuộc tính | Mô tả | Ví dụ |
| border-top | Đường viền phía trên | border-top: 3px solid red; |
| border-right | Đường viền bên phải | border-right: 2px dashed green; |
| border-bottom | Đường viền phía dưới | border-bottom: 4px double blue; |
| border-left | Đường viền bên trái | border-left: 1px dotted orange; |
Thiết lập riêng từng thuộc tính cho mỗi cạnh
Bạn có thể tùy chỉnh màu sắc, kiểu hoặc độ dày riêng biệt cho từng cạnh, ví dụ:
.container {
border-top-width: 4px;
border-right-style: dashed;
border-bottom-color: #333;
border-left: none;
}
Kỹ thuật này giúp bạn thiết kế bố cục sáng tạo, chẳng hạn:
- Chỉ có viền trên cùng để tạo “thanh tiêu đề”
- Chỉ có viền dưới để nhấn mạnh phần nội dung chính
- Hoặc ẩn một cạnh để tạo cảm giác nổi khối cho thẻ thông tin.
Bo tròn đường viền theo vị trí góc
Ngoài việc tạo viền, bạn có thể bo tròn từng góc bằng border-radius:
.box {
border: 2px solid #666;
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;
}
Kết quả: phần tử có hai góc bo tròn, giúp giao diện mềm mại và hiện đại hơn.
Tạo hiệu ứng viền đa lớp (border multiple)
Nếu muốn đường viền có nhiều lớp màu hoặc chiều sâu, bạn có thể kết hợp box-shadow hoặc pseudo-element (::before / ::after).
.button {
border: 2px solid #007bff;
box-shadow: 0 0 0 3px #cce5ff; /* Tạo lớp viền thứ hai màu nhạt hơn */
}
Kỹ thuật này giúp tạo hiệu ứng viền kép hoặc phát sáng mà không cần thêm phần tử HTML.
Qua bài viết, bạn đã hiểu rõ Border CSS là gì, các thuộc tính quan trọng và cách tùy chỉnh đường viền linh hoạt cho từng phần tử. Việc nắm vững kỹ thuật này không chỉ giúp giao diện website trở nên đẹp mắt, chuyên nghiệp hơn mà còn thể hiện sự tỉ mỉ của người lập trình.
Nếu bạn đang học lập trình web hoặc cần môi trường ổn định để thử nghiệm CSS, LANIT cung cấp dịch vụ VPS tốc độ cao, hoạt động ổn định 24/7 – giúp bạn dễ dàng test, lưu trữ và triển khai website một cách hiệu quả nhất.
