Trong thiết kế web, Rounded Corners (bo góc) là một hiệu ứng CSS phổ biến giúp làm mềm các cạnh của phần tử, tạo ra giao diện thân thiện và hiện đại hơn. Bạn có thể dễ dàng tạo các góc bo cho phần tử với thuộc tính border-radius. Bài viết này sẽ hướng dẫn bạn chi tiết cách sử dụng border-radius trong CSS, các giá trị khác nhau, và các kỹ thuật nâng cao để tùy chỉnh giao diện phần tử.

1. Tổng quan về thuộc tính border-radius

Thuộc tính border-radius trong CSS cho phép bạn bo tròn các góc của phần tử. Cách thiết lập đơn giản nhất là sử dụng một giá trị duy nhất để bo tròn đều tất cả các góc.

Cú pháp

css
selector {
    border-radius: value;
}
  • value: Có thể là một giá trị cố định (như px, %, em) hoặc nhiều giá trị để thiết lập từng góc.

Ví dụ:

css
.box {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    border-radius: 15px;
}

Trong ví dụ này, tất cả các góc của .box sẽ được bo tròn 15px.

2. Các giá trị cơ bản của border-radius

2.1 Bo tròn đều các góc

Để bo tròn đều tất cả các góc của phần tử, bạn có thể chỉ cần thiết lập một giá trị cho border-radius.

css
.box {
    border-radius: 10px;
}

Hoặc sử dụng phần trăm:

css
.circle {
    width: 100px;
    height: 100px;
    background-color: #FF5733;
    border-radius: 50%; /* Tạo hình tròn */
}

Sử dụng giá trị 50% cho border-radius sẽ tạo ra hình tròn hoàn hảo nếu chiều rộng và chiều cao của phần tử bằng nhau.

2.2 Bo tròn riêng lẻ từng góc

Bạn có thể thiết lập các giá trị khác nhau cho mỗi góc theo thứ tự: trên trái, trên phải, dưới phải, và dưới trái.

css
.box {
    border-radius: 10px 20px 30px 40px;
}

Trong ví dụ này:

  • Góc trên trái: 10px
  • Góc trên phải: 20px
  • Góc dưới phải: 30px
  • Góc dưới trái: 40px

2.3 Bo tròn theo cặp góc đối diện

Nếu bạn muốn bo tròn hai góc đối diện giống nhau, bạn có thể dùng cú pháp border-radius với hai giá trị.

css
.box {
    border-radius: 10px 20px;
}

Trong ví dụ này:

  • Góc trên trái và dưới phải: 10px
  • Góc trên phải và dưới trái: 20px

3. Sử dụng border-radius với các giá trị nâng cao

3.1 Border-radius với hai giá trị cho mỗi góc

Bạn cũng có thể chỉ định hai giá trị cho mỗi góc để tạo hiệu ứng bo góc khác biệt giữa chiều ngang và chiều dọc.

css
.box {
    border-top-left-radius: 20px 40px;
    border-top-right-radius: 20px 40px;
    border-bottom-right-radius: 10px 30px;
    border-bottom-left-radius: 10px 30px;
}

3.2 Border-radius kết hợp với hình ảnh

border-radius cũng hoạt động tốt với các phần tử có hình nền và ảnh, giúp tạo các viền bo mềm mại cho ảnh mà không cần chỉnh sửa trực tiếp trong phần mềm thiết kế.

css
.img-rounded {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}
html
Thử online
<div class="img-rounded">
    <img src="path-to-image.jpg" alt="Rounded Image" width="150" height="150">
</div>

Sử dụng overflow: hidden; để đảm bảo hình ảnh không vượt ra ngoài phần tử chứa, tạo hình tròn đẹp mắt.

4. Các ứng dụng thực tế của border-radius

4.1 Tạo nút bấm với góc bo tròn

Góc bo tròn giúp các nút bấm trở nên mềm mại và hiện đại hơn.

css
.button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.button:hover {
    background-color: #0056b3;
}

4.2 Tạo thẻ thông tin với các góc bo tròn

Các thẻ thông tin với góc bo tròn mang lại cảm giác thân thiện, dễ nhìn hơn.

css
.card {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 15px;
    width: 250px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

4.3 Bo tròn các cạnh của modal hoặc hộp thoại

Bạn có thể sử dụng border-radius để tạo các hộp thoại hoặc modal với các góc bo tròn, giúp giao diện mềm mại hơn.

css
.modal {
    width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

5. Kết hợp border-radius với các thuộc tính CSS khác

Kết hợp border-radius với các thuộc tính CSS khác có thể tạo ra nhiều hiệu ứng độc đáo và bắt mắt.

5.1 Kết hợp với box-shadow

Kết hợp border-radius với box-shadow giúp phần tử nổi bật và có chiều sâu hơn.

css
.card {
    width: 300px;
    padding: 20px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

5.2 Kết hợp với background gradient

Bạn có thể sử dụng border-radius cùng với gradient để tạo các hiệu ứng nền mềm mại cho phần tử.

css
.rounded-gradient {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background: linear-gradient(45deg, #4A90E2, #50E3C2);
}

6. Kết luận

CSS border-radius là một công cụ mạnh mẽ và dễ sử dụng để tạo ra các phần tử giao diện hiện đại và thân thiện. Bạn có thể kết hợp border-radius với nhiều thuộc tính CSS khác để tạo ra các hiệu ứng độc đáo và tăng tính thẩm mỹ cho trang web. Hãy truy cập thêm các bài học khác trên "codetuthub.com" như CSS Box Shadow, CSS Background Gradient, và CSS Flexbox để mở rộng kiến thức về thiết kế giao diện CSS!