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 solid | Xem 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 groove
- ridge
- - Đường viền của phần tử sẽ có kiểu ridge
- inset
div{
border-style:dotted solid double none;
}
- Đườ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 groove
- ridge
- - Đường viền của phần tử sẽ có kiểu ridge
div{
border-style:dotted solid double;
}
- Đườ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 outset
- ridge
div{
border-style:dotted solid;
}
- Đườ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