CSS Border Sides
Đường viền CSS - Các mặt riêng lẻ
Từ các ví dụ trên các trang trước, bạn đã thấy rằng có thể chỉ định một đườ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):
Thí dụ
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Kết quả:
Different Border Styles
Ví dụ trên cho kết quả tương tự như sau:
Thí dụ
p {
border-style: dotted solid;
}
Vì vậy, đây là cách nó hoạt động:
Nếu thuộc border-styletính có bốn giá trị:
- kiểu đường viền: nét đứt đôi liền nét;
- đường viền trên cùng được chấm
- biên giới bên phải là vững chắc
- đường viền dưới là đôi
- đường viền bên trái được gạch ngang
Nếu thuộc border-styletính có ba giá trị:
- kiểu viền: đôi liền nét chấm;
- đường viền trên cùng được chấm
- biên giới bên phải và bên trái là chắc chắn
- đường viền dưới là đôi
Nếu thuộc border-styletính có hai giá trị:
- kiểu đường viền: nét liền mảnh;
- đường viền trên và dưới được chấm
- biên giới bên phải và bên trái là chắc chắn
Nếu thuộc border-styletính có một giá trị:
- border-style: dotted;
- tất cả bốn đường viền đều có dấu chấm
Thí 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;
}
Thuộc border-styletính đượ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.