Cách sử dụng border-radius - Bo tròn góc phần tử bằng CSS

Bo tròn góc của các phần tử bằng CSS là một kỹ thuật phổ biến trong thiết kế web hiện đại. Việc này không chỉ giúp cho giao diện trở nên mềm mại, thân thiện hơn mà còn tạo ra những hiệu ứng đặc biệt thu hút người dùng. Để thực hiện, thuộc tính border-radius trong CSS là công cụ mạnh mẽ và linh hoạt mà chúng ta có thể sử dụng.

Khái niệm cơ bản về border-radius

border-radius cho phép bạn bo tròn các góc của một phần tử bằng cách đặt một bán kính cho các góc đó. Bán kính này có thể được xác định bằng pixel (px), phần trăm (%), em, rem hoặc bất kỳ đơn vị đo lường nào được CSS hỗ trợ.

Cú pháp cơ bản

Cú pháp đơn giản nhất của border-radius là sử dụng một giá trị duy nhất để bo tròn tất cả các góc của một phần tử:

.element {
    border-radius: 20px;
}

Trong ví dụ trên, tất cả bốn góc của phần tử mang lớp element sẽ được bo tròn với bán kính 20px.

Bo tròn từng góc riêng biệt

Nếu bạn muốn bo tròn các góc một cách độc lập, bạn có thể chỉ định bốn giá trị lần lượt cho các góc: trên trái, trên phải, dưới phải và dưới trái.

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

Trong ví dụ này:

• Góc trên trái có bán kính là 10px.
• Góc trên phải có bán kính là 20px.
• Góc dưới phải có bán kính là 30px.
• Góc dưới trái có bán kính là 40px.

Sử dụng phần trăm

Ngoài việc sử dụng các đơn vị cố định như pixel, border-radius cũng hỗ trợ phần trăm, giúp giao diện thích ứng tốt trên nhiều kích thước khác nhau.

.element {
    border-radius: 50%;
}

Sử dụng 50% sẽ tạo ra một phần tử có hình dạng gần như tròn nếu phần tử đó có chiều dài và chiều rộng bằng nhau.

Đa bán kính

Bạn cũng có thể chỉ định border-radius cho hai chiều khác nhau (được gọi là "horizontal radius" và "vertical radius") để tạo ra các hình dạng phức tạp hơn.

.element {
    border-radius: 20px 50px;
}

Trong ví dụ trên:

• 20px là bán kính theo chiều ngang (horizontal radius).
• 50px là bán kính theo chiều dọc (vertical radius).

Bo tròn các góc cụ thể

CSS cũng cho phép bạn bo tròn từng góc riêng biệt bằng cách sử dụng các thuộc tính cụ thể:

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

Ví dụ:

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

Kết luận

Việc bo tròn góc phần tử bằng CSS không chỉ dễ dàng mà còn mang lại nhiều lợi ích về mặt thẩm mỹ và trải nghiệm người dùng. Thuộc tính border-radius giúp nhà phát triển tạo ra những giao diện đẹp mắt và mềm mại, phù hợp với xu hướng thiết kế hiện đại. Dù bạn chỉ cần bo tròn một góc nhỏ hay muốn tạo ra những hình dạng phức tạp hơn, border-radius đều là công cụ không thể thiếu.

Hãy thử áp dụng ngay vào dự án của bạn và trải nghiệm sự thay đổi tích cực mà border-radius mang lại!