CSS Border-Radius: Hướng Dẫn Toàn Tập Kèm Ví Dụ & Tool

Bạn muốn thoát khỏi những thiết kế web vuông vức, khô cứng? Thuộc tính border-radius trong CSS chính là “cây đũa thần” giúp bạn tạo ra những góc bo tròn mềm mại và hiện đại. Trong hướng dẫn toàn tập này, WiWeb sẽ cùng bạn tìm hiểu chi tiết từ cú pháp cơ bản đến các kỹ thuật tạo hình nâng cao, đi kèm vô số ví dụ thực tế và cả công cụ trực quan. Hãy cùng bắt đầu nhé!

Thuộc tính border-radius trong CSS là gì?

Hiểu một cách đơn giản, border-radius là thuộc tính CSS cho phép bạn “mài dũa” các góc nhọn của một phần tử HTML. Thay vì những hình hộp sắc cạnh, bạn có thể tạo ra các góc được bo tròn với độ cong tùy chỉnh. Đây là một công cụ cực kỳ mạnh mẽ trong thiết kế web hiện đại.

Nó không chỉ làm cho giao diện trở nên mềm mại và thân thiện hơn, mà còn giúp điều hướng sự chú ý của người dùng một cách tinh tế. Các góc tròn tạo cảm giác an toàn, dễ gần và tự nhiên hơn so với các góc vuông cứng nhắc.

Chắc hẳn bạn đang thắc mắc, ngoài đẹp ra thì nó còn lợi ích gì nữa không? Chắc chắn là có rồi. Việc sử dụng css rounded corners mang lại nhiều giá trị:

• Cải thiện tính thẩm mỹ: Giao diện trông chuyên nghiệp, hiện đại và hấp dẫn hơn.
• Tăng trải nghiệm người dùng (UX): Các nút bấm (buttons) hay thẻ (cards) bo góc tạo cảm giác dễ chịu và dễ tương tác hơn.
• Làm nổi bật nội dung: Bạn có thể dùng nó để tạo khung cho hình ảnh, video hoặc các khối văn bản quan trọng, giúp chúng tách biệt và nổi bật khỏi nền.
• Thể hiện sự sáng tạo: Đừng giới hạn ở việc bo góc, bạn hoàn toàn có thể tạo ra các hình dạng độc đáo như hình tròn, elip, hay hình viên thuốc.

Cú pháp border-radius và cách sử dụng chi tiết

Thuộc tính border-radius rất linh hoạt với nhiều cách viết khác nhau, từ đơn giản đến phức tạp. Hãy cùng WiWeb đi qua từng cú pháp rút gọn (border-radius shorthand) nhé.

Cú pháp rút gọn (Shorthand) với 1 giá trị (cho cả 4 góc)

Đây là cách dùng phổ biến nhất. Khi bạn chỉ định một giá trị, nó sẽ được áp dụng đồng đều cho cả bốn góc của phần tử.

.element {
  border-radius: 15px;
}
/* Kết quả: Cả 4 góc đều được bo tròn với bán kính 15px. */

Cú pháp với 2 giá trị (góc trên-trái/dưới-phải và trên-phải/dưới-trái)

Khi dùng hai giá trị, mọi thứ trở nên thú vị hơn một chút:

• Giá trị thứ nhất áp dụng cho góc trên-trái và dưới-phải.
• Giá trị thứ hai áp dụng cho góc trên-phải và dưới-trái.

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

Cú pháp với 3 giá trị (góc trên-trái, trên-phải/dưới-trái, dưới-phải)

Với ba giá trị, quy tắc như sau:

• Giá trị thứ nhất cho góc trên-trái.
• Giá trị thứ hai cho góc trên-phải và dưới-trái.
• Giá trị thứ ba cho góc dưới-phải.

.element {
  border-radius: 15px 50px 30px;
}

Cú pháp với 4 giá trị (cho từng góc theo chiều kim đồng hồ)

Để kiểm soát tuyệt đối, bạn có thể dùng bốn giá trị. Chúng sẽ được áp dụng cho từng góc theo thứ tự chiều kim đồng hồ, bắt đầu từ góc trên cùng bên trái.

• trên-trái → trên-phải → dưới-phải → dưới-trái.

.element {
  border-radius: 15px 50px 30px 5px;
}

Các đơn vị phổ biến: px, %, em, rem

Bạn có thể sử dụng nhiều đơn vị khác nhau với border-radius:

• px (pixels): Giá trị cố định, dễ kiểm soát nhất.
• % (percentage): Giá trị tương đối so với kích thước của phần tử. Rất hữu ích để tạo các hình dạng đáp ứng (responsive) như hình tròn.
• em, rem: Giá trị tương đối so với kích thước font chữ. Ít phổ biến hơn cho border-radius nhưng vẫn có thể sử dụng.

Làm cách nào để chỉ bo tròn một góc?

Đôi khi bạn không muốn bo tròn cả bốn góc mà chỉ cần một hoặc hai góc cụ thể thôi, đúng không? CSS cung cấp cho bạn hai cách để làm điều này.

Sử dụng các thuộc tính riêng lẻ: border-top-left-radius

Cách rõ ràng và dễ đọc nhất là sử dụng các thuộc tính riêng lẻ cho từng góc. Tên của chúng rất dễ nhớ.

• border-top-left-radius: Bo góc trên bên trái.
• border-top-right-radius: Bo góc trên bên phải.
• border-bottom-right-radius: Bo góc dưới bên phải.
• border-bottom-left-radius: Bo góc dưới bên trái.

Ví dụ, để tạo một thẻ có góc trên bên trái và dưới bên phải được bo tròn:

.special-card {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

Cách này rất tường minh, giúp đồng nghiệp của bạn (hoặc chính bạn trong tương lai) dễ dàng hiểu được code.

Mẹo bo góc bất đối xứng với cú pháp Shorthand

Bạn còn nhớ cú pháp 4 giá trị không? Chúng ta có thể tận dụng nó để chỉ định css border-radius specific corners một cách nhanh chóng. Chỉ cần đặt giá trị 0 cho những góc bạn không muốn bo tròn.

Ví dụ, để chỉ bo tròn góc trên bên phải và dưới bên trái:

/* theo thứ tự: trên-trái, trên-phải, dưới-phải, dưới-trái */
.another-card {
  border-radius: 0 25px 0 25px;
}

Cách này ngắn gọn hơn nhiều. Bạn hãy chọn phương pháp phù hợp với phong cách code của mình nhé!

Tạo hình dạng nâng cao với border-radius

Đừng nghĩ border-radius chỉ dùng để bo góc. Với một chút sáng tạo, bạn có thể tạo ra rất nhiều hình dạng thú vị.

Cách tạo hình tròn bằng CSS

Đây là một trong những ứng dụng phổ biến nhất. Để tạo một border-radius circle, bạn cần hai điều kiện:

1. Phần tử phải là hình vuông (chiều rộng bằng chiều cao).
2. Đặt border-radius: 50%;

Tại sao lại là 50%? Vì 50% có nghĩa là bán kính bo góc bằng một nửa chiều rộng/cao của phần tử. Khi áp dụng cho một hình vuông, các cung tròn ở bốn góc sẽ gặp nhau ở chính giữa, tạo thành một hình tròn hoàn hảo.

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
}

Tạo hình Elip (Elliptical Borders) với cú pháp dấu gạch chéo (/)

Đây là một cú pháp nâng cao hơn. Khi bạn sử dụng dấu / trong giá trị border-radius, bạn đang định nghĩa bán kính bo góc theo hai trục: ngang (horizontal) và dọc (vertical).

• Các giá trị trước dấu / là bán kính ngang.
• Các giá trị sau dấu / là bán kính dọc.

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50% / 50%; /* Tương đương border-radius: 50% */
}

.leaf-shape {
  width: 150px;
  height: 150px;
  border-radius: 50% 0;
  /* Hoặc chi tiết hơn */
  border-radius: 50px / 100px;
}

Tạo các hình dạng độc đáo khác (hình lá, viên thuốc)

Bằng cách kết hợp các giá trị khác nhau, bạn có thể tạo ra vô số hình dạng:

• Hình viên thuốc (Pill shape): Áp dụng border-radius với giá trị lớn (ví dụ 999px) cho một phần tử hình chữ nhật.
• Hình lá (Leaf shape): Sử dụng cú pháp 2 hoặc 4 giá trị với các số khác nhau, ví dụ: border-radius: 5px 50px;.

Khả năng là vô tận, hãy thử nghiệm để tìm ra những hình dạng độc đáo cho riêng mình!

Công Cụ Tạo Mã Border-Radius Trực Quan (Generator)

Giới thiệu công cụ

Thú thật là việc nhớ và tinh chỉnh cú pháp với 4 giá trị hoặc cú pháp dấu gạch chéo có thể khá phức tạp. Đó là lý do các công cụ border-radius generator ra đời. Đây là những công cụ trực quan cho phép bạn kéo các thanh trượt để điều chỉnh độ cong của từng góc một cách dễ dàng.

Sau khi bạn có được hình dạng ưng ý, công cụ sẽ tự động tạo ra đoạn mã CSS tương ứng. Bạn chỉ việc sao chép và dán vào dự án của mình. Rất nhanh và tiện lợi!

Thử ngay: Border-Radius Generator

Một trong những công cụ tạo mã và tính toán bo góc (border-radius calculator) được yêu thích nhất là của CSSGenerator.io. Giao diện của nó rất đơn giản:

• Bạn sẽ thấy một hình vuông mẫu.
• Có các ô nhập liệu hoặc thanh trượt cho từng góc, kể cả bo góc theo trục ngang và dọc.
• Khi bạn thay đổi giá trị, hình dạng mẫu sẽ cập nhật ngay lập tức.
• Đoạn mã CSS sẽ được hiển thị sẵn sàng để bạn sử dụng.

Công cụ này giúp bạn tiết kiệm rất nhiều thời gian và khám phá ra những hình dạng phức tạp mà không cần phải đoán mò giá trị.

Ví dụ thực tế và ứng dụng của border-radius

Lý thuyết là vậy, nhưng border-radius tỏa sáng nhất khi được áp dụng vào thực tế. Dưới đây là một vài border-radius example phổ biến mà bạn gặp hàng ngày.

Tạo nút bấm (Buttons) bo góc mềm mại

Một chút bo góc nhẹ nhàng có thể biến một nút bấm từ khô khan thành thân thiện và mời gọi hơn. Hầu hết các thư viện UI hiện đại đều sử dụng border-radius cho nút bấm.

.button {
  padding: 10px 20px;
  border: none;
  background-color: #2ecc71;
  color: white;
  border-radius: 8px; /* Tạo độ cong nhẹ */
  cursor: pointer;
}

Tạo Avatar hoặc ảnh đại diện hình tròn

Như đã đề cập, đây là ứng dụng kinh điển để tạo ảnh đại diện người dùng hình tròn. Nó giúp giao diện mạng xã hội, diễn đàn hay trang cá nhân trông gọn gàng và đẹp mắt.

.avatar-image {
  width: 150px;
  height: 150px;
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
  border-radius: 50%;
}

Thiết kế thẻ (Cards) và container có góc tròn

Các khối nội dung như thẻ sản phẩm, bài viết blog hay các panel thông tin sẽ trông mềm mại và có tổ chức hơn khi được bo góc. Điều này giúp tạo ra một bố cục hài hòa và dễ chịu cho mắt.

.card {
  padding: 24px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 12px; /* Bo góc cho cả thẻ */
}

Khả năng tương thích trình duyệt (Browser Compatibility)

Đây là một tin vui cho bạn: thuộc tính border-radius được hỗ trợ rất tốt trên hầu hết các trình duyệt hiện đại.

Bảng hỗ trợ trên các trình duyệt phổ biến

Bạn có thể yên tâm sử dụng border-radius mà không cần lo lắng nhiều. Nó hoạt động hoàn hảo trên:

• Google Chrome (phiên bản 4.0 trở lên)
• Mozilla Firefox (phiên bản 4.0 trở lên)
• Microsoft Edge (phiên bản 12 trở lên)
• Safari (phiên bản 5.0 trở lên)
• Opera (phiên bản 10.5 trở lên)

Lưu ý về các tiền tố cũ (-webkit-, -moz-)

Trong quá khứ, khi CSS3 còn mới, các trình duyệt thường thử nghiệm các thuộc tính mới bằng cách sử dụng tiền tố riêng, ví dụ:

• -webkit-border-radius (cho Chrome, Safari)
• -moz-border-radius (cho Firefox)

Hiện nay, các tiền tố này gần như không còn cần thiết nữa. Tuy nhiên, nếu bạn phải làm việc với các dự án rất cũ hoặc cần hỗ trợ những phiên bản trình duyệt cổ, bạn có thể sẽ bắt gặp chúng. Đối với các dự án mới, bạn chỉ cần dùng border-radius là đủ.

Lời kết

Qua hướng dẫn này, WiWeb hy vọng bạn đã nắm vững cách sử dụng thuộc tính border-radius trong CSS. Từ việc bo những góc đơn giản cho nút bấm đến tạo hình đại diện tròn trịa hay các hình thù độc đáo, đây thực sự là một công cụ không thể thiếu để tạo nên một giao diện web hiện đại và thân thiện.

Đừng ngần ngại thử nghiệm với các giá trị và cú pháp khác nhau. Sự sáng tạo chính là chìa khóa để làm cho website của bạn trở nên nổi bật.

Bạn đã từng tạo ra hình dạng độc đáo nào với border-radius chưa? Hãy chia sẻ trong phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đối tác thiết kế website chuyên nghiệp, nơi mỗi chi tiết nhỏ đều được chăm chút, đừng ngần ngại liên hệ với WiWeb. Chúng tôi luôn sẵn sàng lắng nghe và hiện thực hóa ý tưởng của bạn.