Hướng dẫn tạo góc bo tròn bằng CSS

Hướng dẫn tạo góc bo tròn bằng CSS

Chào các bạn, với các bài css cơ bản trước đó chúng ta cũng làm được một số chuyện cho giao diện web mình. Để màu mè hơn một tí hôm nay mình sẽ giới thiệu đến các bạn cách tạo góc bo tròn cho đối tượng HTML bằng CSS.

Trong lúc thiết kế với các đối tượng như: button, viền cạnh, khung, form, text box… đôi khi bạn muốn cho nó tròn tí tạo cảm giác sướng sướng cho người dùng thay vì cứ ngồi ngắm mấy cái vuông vuông trên trình duyệt.

Để làm được chuyện này CSS cung cấp cho bạn một số thuộc tính giúp bạn định dạng bo tròn góc bao gồm bo trong trái, phải, toàn phần. Chúng ta khai báo như sau:

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

Chỉ số ở phía sau chỉ độ bo tròn của góc nhiều hay ít, với cách định dạng trên bạn sẽ được 4 góc bo tròn như hình sau:

Bo góc toàn phần trong CSS

Bo góc toàn phần trong CSS

1. Bo tròn góc trên trái
1
2
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
2. Bo góc tròn dưới trái
1
2
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
3. Bo góc tròn trên phải
1
2
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
4. Bo tròn góc dưới phải
1
2
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;

Hướng dẫn tạo góc bo tròn bằng CSS

Bo góc trong CSS

Kết luận: Lưu ý với các bạn các thuộc tính bo góc trong CSS này chỉ làm việc được trên các trình duyệt: google chrome, firefox, opera … chỉ trừ IE ra thui

Bạn thấy bài viết này như thế nào?: 
No votes yet

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Quản lý nhiều tài khoản user trong một máy Mac (Lion)
Quản lý nhiều tài khoản user trong một máy Mac (Lion)

Bài viết hướng dẫn cách làm Mac tự động đăng nhập vào một tài khoản, hoặc chuyển từ tài khoản này sang tài khoản khác thật nhanh chóng.

Làm thế nào để quảng cáo hiệu quả?
Làm thế nào để quảng cáo hiệu quả?

Những chiến lược quảng cáo truyền thống đã từng hiệu quả từ 20, 10 hoặc thậm chí chỉ 5 năm gần đây có thể không còn được áp dụng trên thị trường hiện nay.

Chiến lược Seo quyết định thứ hạng cao
Chiến lược Seo quyết định thứ hạng cao

Chúng ta đã biết 4 thành tố quan trọng nhất trong thứ hạng từ khóa đó là “Tứ trụ trong Seo” bao gồm điều hướng Onpage,