Thuộc tính border-style

Thuộc tính border-style thiết lập kiểu đường viền cho tất cả các cạnh cùng một lúc hoặc riêng biệt cho từng cạnh. Là một thuộc tính viết tắt cho các thuộc tính sau: border-left-style, border-right-style, border-top-style, border-bottom-style.

Cú pháp

cssbộ chọn {
  border-style: giá trị;
}

Giá trị

Giá trị mặc định: none.

Số lượng giá trị

Thuộc tính có thể nhận 1, 2, 3 hoặc 4 giá trị, được chỉ định cách nhau bởi dấu cách:

Ví dụ . Giá trị solid

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị dotted

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị dashed

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: dashed;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị ridge

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: ridge;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị double

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: double;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị groove

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: groove;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị inset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: inset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ . Giá trị outset

html<div id="elem"></div>

css#elem {
  border-width: 3px;
  border-style: outset;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ

Trong ví dụ này, các kiểu đường viền khác nhau được thiết lập cho các cạnh khác nhau của phần tử:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted dashed dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ

Và bây giờ cho các cạnh khác nhau của phần tử cũng được thiết lập độ dày đường viền và màu sắc khác nhau:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Ví dụ

Bây giờ cho cạnh trên và dưới được thiết lập kiểu solid, còn cho cạnh phải và trái - dotted:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid dotted;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Xem thêm