CSS Borders

Các thuộc tính CSS border cho phép bạn chỉ định kiểu, chiều rộng, và màu sắc của đường viền của một phần tử.

CSS Border Style

Thuộc tính border-style được sử dụng để chỉ định loại đường viền để hiển thị.

Các giá trị sau được cho phép:

1. dotted - Định nghĩa một đường viền kiểu chấm chấm.
2. dashed - Định nghĩa một đường viền kiểu nét đứt.
3. solid - Định nghĩa một đường viền kiểu nét liền.
4. double - Định nghĩa một đường viền kiểu kép.
5. groove - Định nghĩa một đường viền kiểu 3D grooved. Hiệu ứng phụ thuộc vào giá trị của thuộc tính border-color.
6. ridge - Định nghĩa một đường viền kiểu 3D ridged. Hiệu ứng phụ thuộc vào giá trị của thuộc tính border-color.
7. inset - Định nghĩa một đường viền kiểu 3D inset. Hiệu ứng phụ thuộc vào giá trị của thuộc tính border-color.
8. outset - Định nghĩa một đường viền kiểu 3D outset. Hiệu ứng phụ thuộc vào giá trị của thuộc tính border-color.
9. none - Định nghĩa không có đường viền.
10. hidden - Định nghĩa một đường viền ẩn. 

Thuộc tính border-style có thể có từ một đến bốn giá trị (cho đường viền trên, đường viền bên phải, đường viền dưới, và đường viền bên trái).

Ví dụ sau sẽ thể hiện các kiểu đường viền khác nhau:

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

Kết quả trả về:

Ghi chú: Không có thuộc tính CSS border nào có hiệu ứng nếu như thuộc tính border-style không được thiết lập!