CSS Borders: Hướng Dẫn Chi Tiết Tạo Viền Cho Phần Tử

Thuộc tính border trong CSS dùng để thiết lập viền cho phần tử HTML. Nó là viết tắt của 3 thuộc tính con: border-width, border-color, border-style.

Giới Thiệu Về Border Trong CSS

Border tạo đường viền quanh phần tử (ảnh, hộp, form...), giúp tách biệt nội dung, dễ đọc hơn. Border là viết tắt của 3 sub-properties:

• border-width: Độ dày viền
• border-color: Màu viền
• border-style: Kiểu viền (solid, dotted, dashed...)

Bạn có thể dùng border viết tắt hoặc từng sub-property riêng lẻ.

Chi Tiết 3 Sub-properties

border-style - Kiểu Viền

Xác định hình dáng đường viền. 10 giá trị có thể:

.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }

border-width - Độ Dày Viền

Đơn vị: px, pt, em... hoặc từ khóa: thin (1px), medium (3px), thick (5px).

.box { border-style: solid; border-width: 5px; }

border-color - Màu Viền

Chấp nhận: tên màu (blue), HEX (#000), HSL, RGB, transparent.

.box { border-style: dotted; border-width: 5px; border-color: blue; }

Nhiều Giá Trị Cho Sub-properties

Mỗi sub-property có thể nhận nhiều giá trị để tùy chỉnh từng cạnh:

• 1 giá trị: áp dụng cho 4 cạnh
• 2 giá trị: trên/dưới → trái/phải
• 3 giá trị: trên → trái/phải → dưới
• 4 giá trị: trên → phải → dưới → trái (theo chiều kim đồng hồ)

.box { border-style: solid dashed; } /* trên/dưới solid, trái/phải dashed */

CSS Border Shorthand - Viết Tắt

Gộp 3 sub-properties thành 1 dòng: border: width style color; (thứ tự không quan trọng, style bắt buộc).

.box { border: 5px solid pink; }

Border Riêng Lẻ Cho Từng Cạnh

Dùng các property: border-left, border-right, border-top, border-bottom với hậu tố -style, -color, -width hoặc viết tắt trực tiếp.

.box { border-left: 2px solid; border-top: 5px dotted; }

Trái: solid 2px. Trên: dotted 5px.

Kết Luận

border và 3 sub-properties (style, color, width) cho phép tùy biến viền linh hoạt. Bạn cũng học cách style từng cạnh riêng biệt. Tiếp theo có thể tìm hiểu: border-image, border-collapse, outline, border-radius, box-shadow...