Thuộc tính border-style CSS

Định nghĩa và cách sử dụng

Thuộc tính border-style được sử dụng để thiết lập kiểu cạnh viền của các yếu tố, hoặc riêng biệt cho mỗi cạnh thiết lập kiểu cạnh viền.

Chỉ khi giá trị này không phải là none thì cạnh viền mới có thể xuất hiện.

Ví dụ 1

border-style:dotted solid double dashed;
  • Cạnh trên là hình điểm.
  • Cạnh phải là đường thẳng.
  • Cạnh dưới là đường đôi.
  • Cạnh trái là đường mờ.

Ví dụ 2

border-style:dotted solid double;
  • Cạnh trên là hình điểm.
  • Cạnh phải và cạnh trái là đường thẳng.
  • Cạnh dưới là đường đôi.

Ví dụ 3

border-style:dotted solid;
  • Cạnh trên và cạnh dưới là hình điểm.
  • Cạnh phải và cạnh trái là đường thẳng.

Ví dụ 4

border-style:dotted;
  • Tất cả 4 cạnh đều là hình điểm.

Xin xem thêm:

CSS Hướng dẫn:BORDER CSS

Tài liệu tham khảo HTML DOM:Thuộc tính borderStyle

Ví dụ

Đặt kiểu viền cho 4 cạnh:

p
  {
  border-style:solid;
  }

Thử ngay

Ngữ pháp CSS

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Định nghĩa viền không.
hidden Ngược lại với "none". Tuy nhiên, ngoại trừ khi áp dụng cho bảng, đối với bảng, "hidden" được sử dụng để giải quyết xung đột viền.
dotted Định nghĩa viền chấm. Trong hầu hết các trình duyệt, nó được hiển thị như đường thẳng.
dashed Định nghĩa đường chấm. Trong hầu hết các trình duyệt, nó được hiển thị như đường thẳng.
solid Định nghĩa đường thẳng.
double Định nghĩa đường đôi. Độ rộng của đường đôi bằng giá trị border-width.
groove Định nghĩa viền groove 3D. Hiệu ứng phụ thuộc vào giá trị border-color.
ridge Định nghĩa viền stepped 3D. Hiệu ứng phụ thuộc vào giá trị border-color.
inset Định nghĩa viền inset 3D. Hiệu ứng phụ thuộc vào giá trị border-color.
outset Định nghĩa viền outset 3D. Hiệu ứng phụ thuộc vào giá trị border-color.
inherit Định nghĩa rằng nên kế thừa kiểu viền từ phần tử cha.

Mô tả

Kiểu viền không thể dự đoán nhất là double. Nó được định nghĩa là hai đường với độ rộng cộng thêm khoảng cách giữa hai đường bằng giá trị border-width. Tuy nhiên, tiêu chuẩn CSS không nói rằng một đường có độ rộng lớn hơn đường khác hay hai đường có độ rộng bằng nhau, cũng không chỉ ra rằng khoảng cách giữa hai đường có nên lớn hơn độ rộng đường hay không. Tất cả điều này đều do người đại diện người dùng quyết định và người sáng tạo không có bất kỳ ảnh hưởng nào đối với quyết định này.

Chi tiết kỹ thuật

Giá trị mặc định: not specified
Di truyền: no
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.borderStyle="dotted double"

Các ví dụ khác

Đặt kiểu viền bốn cạnh
Ví dụ này minh họa cách đặt kiểu viền bốn cạnh.
Đặt khác nhau các cạnh của viền
Ví dụ này minh họa cách đặt khác nhau các cạnh của viền cho một phần tử.

Hỗ trợ trình duyệt

Số trong bảng chú thích phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5