Cạnh BORDER CSS

CSS viền - Viền riêng lẻ

Trong ví dụ của chương trước, bạn đã thấy có thể chỉ định viền khác nhau cho mỗi bên.

Trong CSS, còn một số thuộc tính có thể được sử dụng để chỉ định mỗi viền (đầu, bên phải, dưới và bên trái):

Ví dụ

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Kết quả:

Các phong cách viền khác nhau

Thử trực tiếp

Các phong cách viền khác nhau

Kết quả của ví dụ trên cũng như vậy:

Ví dụ

p {
  border-style: dotted solid;
}

Thử trực tiếp

Principio hoạt động của nó như sau:

Nếu border-style Cài đặt thuộc tính bốn giá trị:

border-style: dotted solid double dashed;

  • Dòng viền trên là đường mờ
  • Dòng viền bên phải là đường thẳng
  • Dòng viền dưới là đường đôi
  • Dòng viền bên trái là đường mờ

Nếu border-style Cài đặt thuộc tính ba giá trị:

border-style: dotted solid double;

  • Dòng viền trên là đường mờ
  • cạnh phải và cạnh trái là đường thẳng
  • Dòng viền dưới là đường đôi

Nếu border-style Thuộc tính đặt hai giá trị:

border-style: dotted solid;

  • cạnh trên và cạnh dưới là đường trắc
  • cạnh phải và cạnh trái là đường thẳng

Nếu border-style Thuộc tính đặt một giá trị:

border-style: dotted;

  • Bốn cạnh đều là đường trắc

Ví dụ

/* Bốn giá trị */
p {
  border-style: dotted solid double dashed; 
}
/* Ba giá trị */
p {
  border-style: dotted solid double; 
}
/* Hai giá trị */
p {
  border-style: dotted solid; 
}
/* Một giá trị */
p {
  border-style: dotted; 
}

Thử trực tiếp

Ví dụ trên sử dụng là border-style Thuộc tính. Nhưng border-width và border-color cũng áp dụng.