42. Bo góc trong CSS

Bo góc trong CSS:

Trong CSS, thuộc tính “border-radius” được sử dụng để tạo bo góc cho một phần tử HTML, như hình ảnh, hộp chứa, nút, vv. Điều này cho phép bạn làm mềm góc của các phần tử và tạo ra hiệu ứng thiết kế hấp dẫn. Giá trị của thuộc tính này thường là một giá trị dương hoặc 0, đại diện cho bán kính của các góc bo. Để tạo bo góc đều cùng một bán kính cho tất cả các góc, bạn có thể sử dụng một giá trị đơn hoặc nhiều giá trị cho các góc riêng biệt.

Dưới đây là một số ví dụ về cách sử dụng thuộc tính “border-radius” trong CSS:

1. Tạo bo góc vuông (không có bo góc):

css

.square {
  border-radius: 0;
}

2. Tạo bo góc đều với bán kính 10px:

css

.rounded {
  border-radius: 10px;
}

3. Tạo bo góc riêng biệt cho các góc:

css

.custom-rounded {
  border-radius: 10px 20px 30px 40px; /* Trên trái, trên phải, dưới phải, dưới trái */
}

4. Tạo góc tròn hoàn toàn:

css

.circle {
  border-radius: 50%; /* Bán kính bằng 50% chiều rộng hoặc chiều cao */
}

5. Tạo hiệu ứng elip:

css

.ellipse {
  border-radius: 50% 25%; /* Bán kính ngang 50%, bán kính dọc 25% */
}

6. Kết hợp bo góc và bo viền:

css

.styled-box {
  border-radius: 10px;
  border: 2px solid #333;
  padding: 20px;
}

Nhớ rằng, thuộc tính “border-radius” có thể kết hợp với các thuộc tính khác như “border”, “background”, và nhiều thuộc tính khác để tạo ra các hiệu ứng phức tạp và đa dạng hơn trong thiết kế của bạn.