Các mặt viền CSS
Đường viền CSS - Các mặt riêng lẻ
Từ các ví dụ ở các trang trước, bạn đã thấy rằng có thể chỉ định đường viền khác nhau cho mỗi bên.
Trong CSS, cũng có các thuộc tính để chỉ định từng đường viền (trên, phải, dưới và trái):
Ví dụ
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Kết quả:
Ví dụ trên cho kết quả tương tự như sau:
Vì vậy, đây là cách nó hoạt động:
Nếu thuộc border-style
có bốn giá trị:
- kiểu viền: chấm liền nét đứt đôi;
- đường viền trên cùng có chấm
- viền phải chắc chắn
- viền dưới là đôi
- viền trái bị đứt nét
Nếu thuộc tính border-style
có ba giá trị:
- kiểu viền: chấm liền đôi;
- đường viền trên cùng có chấm
- đường viền phải và trái chắc chắn
- viền dưới là đôi
Nếu thuộc tính border-style
có hai giá trị:
- kiểu đường viền: chấm liền;
- viền trên và dưới có chấm
- đường viền phải và trái chắc chắn
Nếu thuộc tính border-style
có một giá trị:
- kiểu viền: chấm;
- cả bốn đường viền đều có chấm
Ví dụ
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
Hãy tự mình thử » Thuộc tính border-style
được sử dụng trong ví dụ trên. Tuy nhiên, nó cũng hoạt động với border-width
và border-color
.