CSS Border Radius – Tool tạo góc bo tròn khung sẵn chỉ copy

Video hướng dẫn bo khung tròn trên wordpress và các theme khác

Border-radius là gì ?

Border-radius là một thuộc tính CSS được sử dụng để tạo hiệu ứng bo góc cho các phần tử trên trang web. Khi áp dụng border-radius, các góc của một phần tử (như hình ảnh, hộp chứa, nút, v.v.) sẽ được làm tròn thay vì sắc cạnh. Điều này giúp tạo ra các giao diện mềm mại, thân thiện và hấp dẫn hơn.

Thuộc tính border-radius có thể được áp dụng cho các phần tử HTML như <div>, <img>, <button>, và nhiều phần tử khác. Giá trị của border-radius là các giá trị đo lường, chẳng hạn như px (pixel) hoặc % (phần trăm), để xác định độ cong của góc. Bạn có thể định rõ giá trị cho từng góc (top-left, top-right, bottom-left, bottom-right) hoặc định rõ giá trị cho tất cả góc cùng một lúc.
Ví dụ, để tạo các góc bo tròn với bán kính 10px cho một phần tử, bạn có thể sử dụng mã CSS sau:

border-radius: 10px;

Vì sao mình viết công cụ tạo Border-radius để bo góc khung tự động?

Bạn cũng biết rồi đó, với đoạn code bo tròn 10px ở trên nếu chỉ dừng ở đây thì có 1 số trình duyệt sẽ không bo tròn như bạn mong muốn, vì vậy để bo tròn trên tất cả các trình duyệt thì bạn cần phải viết css đầy đủ như sau:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Nhưng viết như này thật mất thời gian, vì vậy công cụ này sẽ giúp bạn tạo ra các mã css bo tròn tự động hoạt động với mọi trình duyệt. Bạn chẳng cần biết css là gì, chỉ cần nhập các thông số cần bo góc, sau đó copy css dán vào class trên web của bạn là xong.

Ngoài bo tròn 4 góc thì bạn có thể tạo các hình thù bo góc như chiếc lá