Đường viền CSS
Thuộc tính đường viền CSS 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ử.
Tôi có biên giới ở mọi phía.
Tôi có viền dưới màu đỏ.
Tôi có đường viền tròn.
Kiểu đường viền CSS
Thuộc tính border-style
chỉ định loại đường viền sẽ hiển thị.
Các giá trị sau được cho phép:
-
dotted
- Xác định đường viền chấm -
dashed
- Xác định đường viền nét đứt -
solid
- Xác định một đường viền vững chắc -
double
- Xác định đường viền kép -
groove
- Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền -
ridge
- Xác định đường viền có gờ 3D. Hiệu ứng phụ thuộc vào giá trị màu viền -
inset
- Xác định đường viền lồng vào 3D. Hiệu ứng phụ thuộc vào giá trị màu viền -
outset
- Xác định đường viền đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền -
none
- Xác định không có đường viền -
hidden
- Xác định đường viền ẩn
Thuộc tính border-style
có thể có từ một đến bốn giá trị (cho viền trên, viền phải, viền dưới và viền trái).
Ví dụ
Trình diễ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ả:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Lưu ý: Không có thuộc tính đường viền CSS KHÁC nào (mà bạn sẽ tìm hiểu thêm trong các chương tiếp theo) sẽ có BẤT KỲ hiệu ứng nào trừ khi thuộc tính border-style
được đặt!