05/10/2018, 10:57

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, ...

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:

	-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
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
2. Bo góc tròn dưới trái
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
3. Bo góc tròn trên phải
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
4. Bo tròn góc dưới phải
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
Bo góc trong 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! hi.. chúc thành công!

VN:F [1.9.22_1171]
Rating: 8.7/10 (22 votes cast)
Tạo góc bo tròn bằng CSS, 8.7 out of 10 based on 22 ratings
Tags:css, css cơ bản, CSS3
Bài liên quan

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, ...

Hoàng Hải Đăng viết 2 tuần trước

Tạo icon từ bộ Font Awesome bằng CSS

Font Awesome là một web font chứa tất cả các icon từ Twitter Bootstrap framework , bằng cách ấn định giá trị content trong css, các bạn có thể tạo ra các icon theo ý muốn. Giả sử các bạn muốn tạo icon từ phần tử nào, thì chỉ việc khai báo như sau : .element { position: ...

Hoàng Hải Đăng viết 2 tuần trước

Tạo layout đơn giản bằng CSS & DIV

Để tăng sự mềm dẻo cho trang web, hiện nay người ta đang cố gắng loại bỏ các table khi thiết kế layout, thay vào đó là sử dụng thẻ DIV và kết hợp với CSS. Bài viết này cung cấp một ví dụ đơn giản giúp chúng ta có thể nhanh chóng dựng một layout mà không tốn quá nhiều thời gian cho việc ...

Hoàng Hải Đăng viết 3 tuần trước

Cách tạo góc bo tròn cho phần tử HTML bằng CSS

Thuộc tính border-radius dùng để tạo góc bo tròn cho các phần tử, hình ảnh,..... Cách tạo góc bo tròn cho phần tử Một phần tử luôn có bốn góc ở bốn vị trí như sau: top-left top-right bottom-left bottom-right Để tạo góc bo tròn cho phần tử dựa theo từng vị trí ...

Hoàng Hải Đăng viết 11:11 ngày 18/08/2018

Các trạng thái của liên kết, tạo nút liên kết bằng CSS

Các trạng thái của liên kết Một liên kết sẽ luôn có bốn trạng thái: Trạng thái link – nếu người dùng chưa từng viếng thăm địa chỉ trang web của liên kết này Trạng thái visited – nếu người dùng đã từng viếng thăm địa chỉ trang web của liên kết này Trạng thái hover – khi ...

Bùi Văn Nam viết 10:57 ngày 18/08/2018
0