Cách Dùng CSS Border-Radius Tạo Viền Bo Tròn Cho Nút Và Hình Ảnh

5/5 - (2 bình chọn)

Trong thiết kế giao diện người dùng (UI) hiện đại, sự tinh tế và hài hòa được chú trọng tối đa. Một chi tiết nhỏ nhưng mang lại hiệu ứng thẩm mỹ đáng kể chính là việc bo tròn các góc của nút bấm và hình ảnh. Việc này không chỉ giúp giao diện trở nên mềm mại và thân thiện hơn mà còn tăng tính chuyên nghiệp cho website hoặc ứng dụng của bạn.

Bài viết này sẽ hướng dẫn bạn cách sử dụng CSS để tạo hiệu ứng bo tròn góc một cách đơn giản và hiệu quả, bao gồm:

Giới thiệu các thuộc tính CSS liên quan như border-radius.
Hướng dẫn tùy chỉnh mức độ bo tròn cho từng phần tử UI.
Cung cấp ví dụ minh họa cụ thể cho nút bấm, hình ảnh và các khối nội dung.

Với các hướng dẫn này, bạn sẽ dễ dàng áp dụng CSS để tạo giao diện UI đẹp mắt, hiện đại và chuyên nghiệp, giúp trải nghiệm người dùng trở nên thân thiện và trực quan hơn.

Làm thế nào để bo tròn góc của nút và hình ảnh bằng CSS?

Thuộc tính border-radius là công cụ chính để bo tròn các góc của phần tử HTML. Thuộc tính này cho phép bạn điều chỉnh độ cong của từng góc riêng biệt hoặc tất cả các góc cùng một lúc.

border-radius: giá_trị;

Trong đó, “giá_trị” có thể là một giá trị duy nhất hoặc nhiều giá trị, phân cách nhau bằng dấu cách. Các giá trị có thể là đơn vị đo lường (px, em, rem, %) hoặc giá trị không đơn vị (vd: 10px, 50%, 0)

Các cách sử dụng:

Chúng ta có thể điều chỉnh độ cong của góc theo ý muốn. Dưới đây là một số cách để tùy chỉnh góc và hình dạng viền:

Độ cong đồng nhất cho tất cả các góc: Ví dụ:

border-radius: 10px;

Với cú pháp trên tất cả các góc của phần tử sẽ được làm tròn với bán kính 10px.

Độ cong riêng biệt cho từng góc: Ví dụ:

border-radius: 10px 20px 30px 40px;

Trong trường hợp này, chúng ta có thể đặt giá trị riêng biệt cho từng góc theo thứ tự: góc trên bên trái, góc trên bên phải, góc dưới bên phải và góc dưới bên trái.

Độ cong riêng biệt cho hai góc đối diện: Ví dụ:

border-radius: 10px 20px;

Giá trị 10px được áp dụng cho góc trên bên trái và góc dưới bên phải, trong khi giá trị 20px được áp dụng cho góc trên bên phải và góc dưới bên trái. Điều này cho phép bạn tạo ra các hình dạng viền bo tròn không đối xứng

Ví dụ thực tế trên 1 trang web:

Sử dụng border-radius trong các phần tử khác nhau

Tính năng border-radius có thể được áp dụng cho nhiều phần tử khác nhau trên trang web. Dưới đây là một số ví dụ:

Hình ảnh: Áp dụng để làm tròn góc của hình ảnh và tạo hiệu ứng viền bo tròn cho nó. Ví dụ:
```
img { border-radius: 50%; /* Làm tròn hình ảnh thành hình tròn */ }
```
Nút bấm: Tạo viền bo tròn cho nút bấm để tạo điểm nhấn thẩm mỹ. Ví dụ:
```
.button { border-radius: 5px; /* Độ cong góc cho nút bấm */ }
```
Khung bảng: Làm tròn góc của khung bảng để tạo hiệu ứng bo góc mềm mại. Ví dụ:
```
table { border-radius: 10px; /* Độ cong góc cho khung bảng */ }
```
Hộp thoại: Sử dụng border-radius để làm tròn góc của hộp thoại và tạo hiệu ứng bo góc mềm mại. Ví dụ:
```
.dialog-box { border-radius: 15px; /* Độ cong góc cho hộp thoại */ }
```

Những lưu ý và hạn chế khi sử dụng border-radius

Cần lưu ý một số điểm quan trọng:

Border-radius không hoạt động trên tất cả các trình duyệt cũ, vì vậy cần xem xét khả năng tương thích của tính năng này.
Sử dụng đúng cú pháp và giá trị để đảm bảo hiệu ứng viền bo tròn hiển thị chính xác.
Tùy chỉnh border-radius quá cao có thể làm mất đi tính năng tương thích trên một số trình duyệt.

Muốn giao diện website của bạn đẹp mắt, tinh tế và chuẩn UI/UX hơn? Liên hệ ngay với THIẾT KẾ WEB HÀ NỘI để được tư vấn và thiết kế website chuyên nghiệp!

DỊCH VỤ THIẾT KẾ WEBSITE TẠI HÀ NỘI – KHO GIAO DIỆN HIỆN ĐẠI

Hotline: 0348 627 666