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

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Tommy Tran
Tue, 4/12/2012, 10:32 (GMT+7)
0 Bình luận

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

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;

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?:

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies