Thuộc tính border-radius trong CSS

• Ngọc Thanh
• 32
• 12/07/2025

Theo dõi Web Mới

Thuộc tính border-radius trong CSS là một loại thuộc tính của CSS dùng để bo góc một hình vuông hoặc hình chữ nhật, thậm chí bo thành hình tròn, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính border-radius trong CSS

Thuộc tính border-radius trong CSS là gì?

Thuộc tính border-radius trong CSS là một loại thuộc tính của CSS dùng để bo góc một hình vuông hoặc hình chữ nhật, thậm chí bo thành hình tròn, giúp cho các góc cạnh trở nên đẹp và hiện đại hơn.

Ví dụ Thuộc tính border-radius trong CSS

Css border-radius bốn góc

border-radius:4px;

hoặc 

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

Chạy Thử

Css border-radius 2 góc trái

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;

Chạy Thử

Css border-radius 2 góc phải

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

Chạy Thử

Css border-radius 2 góc trên

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Chạy Thử

Css border-radius 2 góc dưới

-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

Chạy Thử

Css border-radius thành hình tròn

border-radius:50%;

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-radius trong CSS.

Ngọc Thanh

Chia sẻ nội dung đánh giá của bạn về Thuộc tính border-radius trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn