Tạo Bo Góc CSS

Áp dụng thuộc tính border-radius, ví dụ border-radius: 12px;. Với công cụ này, bạn đặt từng góc một cách trực quan và sao chép đúng khai báo, nên không phải đoán giá trị hay nhớ thứ tự các góc.

Khi bạn nhập bốn giá trị, chúng được áp dụng theo chiều kim đồng hồ bắt đầu từ trên trái: Trên trái, Trên phải, Dưới phải, Dưới trái. Các ô điều khiển ở chế độ Đơn giản được dán nhãn đúng theo các góc này, nên giá trị bạn đổi khớp với góc bạn nhìn thấy.

Đặt mọi góc về 50% trên một phần tử vuông. Mẫu Hình tròn có sẵn làm việc này thay bạn — chỉ cần giữ chiều rộng và chiều cao ô xem trước bằng nhau để có hình tròn thật chứ không phải hình bầu dục.

Tắt Khóa tất cả, rồi chỉ tăng Trên trái và Trên phải còn để hai góc dưới ở mức 0. Kết quả sẽ thành dạng border-radius: 16px 16px 0 0;, rất hợp cho tab và phần đầu của thẻ.

Cú pháp đầy đủ là border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Các giá trị trước dấu gạch chéo đặt bán kính ngang của mỗi góc, còn các giá trị sau đặt bán kính dọc. Khi chúng khác nhau, các góc trở nên dạng elip — đó là cách tạo ra hình giọt mềm mại. Chuyển sang chế độ Nâng cao để chỉnh tám giá trị này.

Dùng px cho phần tử cố định kích thước như nút và biểu tượng khi bạn muốn góc chính xác. Dùng % cho phần tử co giãn và hình mềm mại — 50% trên hình vuông tạo ra hình tròn. Nút chuyển đổi đơn vị sẽ quy đổi các giá trị hiện tại khi bạn đổi.

Khi một phần tử con đã bo góc nằm trong một khối cha có padding và đã bo góc, bán kính trong nên nhỏ hơn để trông hài hòa. Công thức là trong = max(0, ngoài − padding). Nhập bo góc ngoài và padding, bộ tính trả về bán kính trong chuẩn kèm hình xem trước — ví dụ, khối cha 16px với padding 8px cho bán kính trong 8px.

Có. Kết quả là CSS thuần, theo chuẩn, chạy được trên mọi trình duyệt hiện đại. Dán nó vào tệp stylesheet, vào style nội tuyến hoặc vào giải pháp CSS-in-JS mà không cần thay đổi gì.