BORDER CSS

Thuộc tính viền CSS

CSS border Thuộc tính cho phép bạn xác định kiểu, độ rộng và màu sắc của viền của phần tử.

Tất cả các cạnh của tôi đều có viền.

Tôi có viền dưới màu đỏ.

Tôi có viền góc tròn.

Tôi có viền trái màu xanh.

Kiểu viền CSS

border-style Thuộc tính xác định loại viền cần hiển thị.

Cho phép các giá trị sau:

  • chấm - Định nghĩa viền chấm
  • gạch - Định nghĩa viền gạch
  • chắc - Định nghĩa viền chắc
  • kép - Định nghĩa viền kép
  • groove - Định nghĩa viền 3D坡口. Hiệu ứng phụ thuộc vào giá trị border-color
  • gân - Định nghĩa viền 3D gân. Hiệu ứng phụ thuộc vào giá trị border-color
  • nội - Định nghĩa viền 3D nội. Hiệu ứng phụ thuộc vào giá trị border-color
  • xuất - Định nghĩa viền 3D xuất. Hiệu ứng phụ thuộc vào giá trị border-color
  • không - Định nghĩa viền không
  • ẩn - Định nghĩa viền ẩn

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

Mẫu

Giới thiệu các樣 thức viền khác nhau:

p.chấm {kiểu biên: chấm;}
p.gạch {kiểu biên: gạch;}
p.chắc {kiểu biên: chắc;}
p kép {kiểu biên: kép;}
p.groove {kiểu biên: groove;}
p.gân {kiểu biên: gân;}
p.nội {kiểu biên: nội;}
p.xuất {kiểu biên: xuất;}
p.không {kiểu biên: không;}
p. ẩn {kiểu biên: ẩn;}
p.mix {border-style: dotted dashed solid double;}

KẾT QUẢ:

BORDER ĐỒI

BORDER VIỆT

BORDER THỰC

BORDER DẸN

BORDER GỌN

BORDER RÚT

BORDER 3D INSET. Hiệu quả phụ thuộc vào giá trị border-color.

BORDER 3D OUTSET. Hiệu quả phụ thuộc vào giá trị border-color.

BORDER KHÔNG

BORDER ẨN

BORDER HỲNH DỰNG HỒI

Thử ngay lập tức

Lưu ý:Trừ khi đã được thiết lập border-style Thuộc tính, nếu không khác các thuộc tính lề CSS khác (sẽ được giải thích chi tiết trong chương tiếp theo) sẽ không có bất kỳ tác dụng nào!