Hướng dẫn border-style trong css - border-style in css

1) Thuộc tính border-style trong CSS

- Thuộc tính border-style dùng để thiết lập một đường viền cho phần tử HTML, đồng thời xác định kiểu của đường viền.border-style dùng để thiết lập một đường viền cho phần tử HTML, đồng thời xác định kiểu của đường viền.

- Ví dụ:

Đường viền của phần tử này có kiểu solid

Đường viền của phần tử này có kiểu dashed

Đường viền của phần tử này có kiểu dotted

Đường viền của phần tử này có kiểu double

Đường viền của phần tử này có kiểu groove

Đường viền của phần tử này có kiểu ridge

Đường viền của phần tử này có kiểu inset

Đường viền của phần tử này có kiểu outset

2) Cách sử dụng thuộc tính border-style trong CSS

- Để sử dụng thuộc tính border-style, ta dùng cú pháp như sau:border-style, ta dùng cú pháp như sau:

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

- Trong đó, ta thấy giá trị thuộc tính border-style có thể được xác định bởi một trong mười một loại:border-style có thể được xác định bởi một trong mười một loại:

none - Không thiết lập đường viền cho phần tử. Xem ví dụ
solid

- Đường viền của phần tử sẽ có kiểu solid

Xem ví dụ
solid

- Đường viền của phần tử sẽ có kiểu solid

dashed

- Đường viền của phần tử sẽ có kiểu dashed

dotted

- Đường viền của phần tử sẽ có kiểu dotted

double

- Đường viền của phần tử sẽ có kiểu double

groove

- Đường viền của phần tử sẽ có kiểu groove

ridge

- Đường viền của phần tử sẽ có kiểu ridge

inset

- Đường viền của phần tử sẽ có kiểu inset

outset

- Đường viền của phần tử sẽ có kiểu outset

initial

Xem ví dụ
solid - Đường viền của phần tử sẽ có kiểu solidXem ví dụ

solid

- Đường viền của phần tử sẽ có kiểu solidborder-style với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn cạnh của phần tử sẽ có chung một kiểu đường viền.

dashed

  • - Đường viền của phần tử sẽ có kiểu dashed
  • dotted
  • - Đường viền của phần tử sẽ có kiểu dotted
  • double

- Đường viền của phần tử sẽ có kiểu double

groove - Đường viền của phần tử sẽ có kiểu grooveridge - Đường viền của phần tử sẽ có kiểu ridgeinset
- Đường viền phía trên của phần tử này có kiểu là dotted
- Đường viền phía bên phải của phần tử này có kiểu là solid
- Đường viền phía dưới của phần tử này có kiểu là double
- Đường viền phía bên trái của phần tử này có kiểu là none
- Đường viền của phần tử sẽ có kiểu inset

outset - Đường viền của phần tử sẽ có kiểu grooveridge - Đường viền của phần tử sẽ có kiểu ridge
- Đường viền phía trên của phần tử này có kiểu dotted
- Đường viền phía bên trái & phải của phần tử này có kiểu solid
- Đường viền phía dưới của phần tử này có kiểu double
- Đường viền của phần tử sẽ có kiểu inset

outset - Đường viền của phần tử sẽ có kiểu outsetridge
- Đường viền phía trên & dưới của phần tử này có kiểu dotted
- Đường viền phía bên trái & phải của phần tử này có kiểu solid
- Đường viền của phần tử sẽ có kiểu inset