Bài 10: Cách sử dụng Borders trong css

Cách sử dụng Borders trong css

Thuộc tính border trong CSS được sử dụng để tạo đường viền cho một phần tử HTML. Bạn có thể sử dụng các thuộc tính con của border để tùy chỉnh đường viền của phần tử đó. Dưới đây là một số thuộc tính con của border và cách sử dụng chúng:

1. border-style: Thuộc tính này được sử dụng để định dạng kiểu đường viền, ví dụ như solid, dotted, dashed, double, và none.

Ví dụ:

div {
  border-style: solid;
}

Trong ví dụ trên, phần tử <div> sẽ có đường viền kiểu solid.

2. border-color: Thuộc tính này được sử dụng để đặt màu cho đường viền.

Ví dụ:

div {
  border-style: solid;
  border-color: red;
}

Trong ví dụ trên, phần tử <div> sẽ có đường viền màu đỏ.

3. border-width: Thuộc tính này được sử dụng để đặt độ dày của đường viền.

Ví dụ:

div {
  border-style: solid;
  border-color: red;
  border-width: 2px;
}

Trong ví dụ trên, phần tử <div> sẽ có đường viền đỏ với độ dày 2px.

4. Thuộc tính border-radius trong CSS được sử dụng để tạo đường viền bo tròn cho một phần tử HTML. Thuộc tính này cho phép bạn chỉ định bán kính của các góc của phần tử.

Ví dụ:

div {
  border-radius: 10px;
}

Trong ví dụ trên, phần tử <div> sẽ có đường viền bo tròn với bán kính là 10px.

Bạn cũng có thể chỉ định bán kính cho từng góc bằng cách sử dụng cú pháp sau:

div {
  border-radius: 10px 20px 30px 40px;
}

Trong ví dụ trên, phần tử <div> sẽ có đường viền bo tròn với bán kính 10px cho góc trên bên trái, 20px cho góc trên bên phải, 30px cho góc dưới bên phải và 40px cho góc dưới bên trái.

Ngoài ra, bạn có thể sử dụng giá trị 50% để tạo đường viền bo tròn thành hình tròn:

div {
  border-radius: 50%;
}

Trong ví dụ trên, phần tử <div> sẽ có đường viền bo tròn thành hình tròn với bán kính bằng một nửa độ dài của phần tử.

Bạn có thể kết hợp các thuộc tính trên để tạo ra đường viền tùy chỉnh cho phần tử HTML của mình. Ngoài ra, CSS cũng cung cấp các thuộc tính con khác như border-image để sử dụng hình ảnh làm đường viền.