Thuộc tính border-radius trong CSS
Trần Thị Vân - 1282
- 12/07/2025
Chức năng của Thuộc tính border-radius trong CSS
Thuộc tính border-radius trong CSS dùng để bo tròn các góc của một phần tử HTML, đơn vị thường dùng là px, %, em,....
Ví dụ Thuộc tính border-radius trong CSS
Css border-radius từng góc
border-radius: 10px; (Bo tròn 4 góc 10px)
border-radius: 0px 5px 15px 30px; (Góc trái trên 0px, góc phải trên 5px, góc phải dưới 15px, góc trái dưới 30px)
border-radius: 50px 0px; (Góc trái trên và góc phải dưới 50px, góc phải trên và góc trái dưới 0px)
border-radius: 1em; (Bo tròn 4 góc 1em)
border-radius: 0em 1em 2em 3em; (Góc trái trên 0em, góc phải trên 1em, góc phải dưới 2em, góc trái dưới 3em)
border-radius: 5%; (Bo tròn 4 góc 5%)
<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử Css border-radius từng góc</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%; float:left; height:auto; background:red; margin-bottom:10px; padding:20px; color:#fff}
</style>
</head>
<body>
<h1>Chạy Thử Css border-radius từng góc</h1>
<p>Dùng để bo tròn các góc của một phần tử HTML, đơn vị thường dùng là px, %, em,...:</p>
<div style="border-radius: 10px;">border-radius: 10px; (Bo tròn 4 góc 10px)</div>
<div style="border-radius: 0px 5px 15px 30px;">border-radius: 0px 5px 15px 30px; (Góc trái trên 0px, góc phải trên 5px, góc phải dưới 15px, góc trái dưới 30px)</div>
<div style="border-radius: 50px 0px;">border-radius: 50px 0px; (Góc trái trên và góc phải dưới 50px, góc phải trên và góc trái dưới 0px)</div>
<div style="border-radius: 1em;">border-radius: 1em; (Bo tròn 4 góc 1em)</div>
<div style="border-radius: 0em 1em 2em 3em;">border-radius: 0em 1em 2em 3em; (Góc trái trên 0em, góc phải trên 1em, góc phải dưới 2em, góc trái dưới 3em)</div>
<div style="border-radius: 5%;">border-radius: 5%; (Bo tròn 4 góc 5%)</div>
</body>
</html>
Css border-radius thành hình tròn
border-radius:50%; (Hình tròn)
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css border-radius thành hình tròn</title>
<style>
#bora-thtron{width:300px; height:300px; margin-bottom:10px; background:#ff0000; float:left; line-height:300px; text-align:center;color:#fff}
</style>
</head>
<body>
<h1>Chạy thử Css border-radius thành hình tròn</h1>
<div id="bora-thtron" style="border-radius:50%"> border-radius:50% (Hình tròn)</div>
</body>
</html>
Ứng dụng border-radius trong thiết kế giao diện CSS
border-radius không chỉ dùng để tạo các góc bo đơn giản mà còn giúp giao diện trở nên mềm mại, dễ nhìn và phù hợp hơn với phong cách thiết kế hiện đại. Khi sử dụng đúng mức, thuộc tính này có thể cải thiện đáng kể cách trình bày nút bấm, hình ảnh, thẻ nội dung và nhiều thành phần khác trên trang web.
Bo tròn nút bấm và thành phần tương tác
Nút bấm thường là vị trí phù hợp để sử dụng border-radius. Một độ bo vừa phải giúp nút có cảm giác thân thiện hơn, đồng thời tạo sự khác biệt rõ ràng với các khối nội dung xung quanh.
.button {
padding: 10px 20px;
border-radius: 8px;
}
Không nên bo góc quá lớn cho mọi loại nút. Với nút có kích thước thông thường, giá trị vừa phải thường tạo cảm giác cân đối. Nếu muốn tạo kiểu nút dạng viên thuốc, có thể dùng giá trị lớn hơn.
.button {
padding: 10px 24px;
border-radius: 999px;
}
Bo góc hình ảnh và khung nội dung
Hình ảnh, thẻ bài viết, khung thông tin hoặc các khu vực nội dung có thể kết hợp border-radius để tạo sự liên kết về mặt thị giác. Đặc biệt, khi một hình ảnh nằm trong cùng một khối với nội dung bên dưới, độ bo phù hợp giúp toàn bộ thành phần trông liền mạch hơn.
.card {
border-radius: 12px;
overflow: hidden;
}
.card img {
width: 100%;
}
Việc kết hợp border-radius với overflow: hidden cũng hữu ích khi cần giữ phần hình ảnh bên trong không vượt ra ngoài các góc đã bo của khung chứa.
Kết hợp border-radius với các thuộc tính CSS khác
border-radius có thể kết hợp với border, background, box-shadow và nhiều thuộc tính CSS khác để tạo thành một thành phần hoàn chỉnh. Chẳng hạn, một khung nội dung có đường viền, nền và bóng đổ sẽ rõ ràng hơn khi các góc được bo đồng nhất.
.box {
border: 1px solid #ddd;
border-radius: 10px;
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
Khi phối hợp nhiều thuộc tính, nên giữ cùng một mức độ bo giữa các thành phần có liên quan. Điều này giúp giao diện có tính nhất quán thay vì mỗi khu vực sử dụng một kiểu góc khác nhau.
Chọn độ bo góc phù hợp cho từng giao diện
Không có một giá trị border-radius cố định phù hợp với mọi thiết kế. Giao diện tối giản có thể chỉ cần bo nhẹ, trong khi các nút hoặc thành phần mang phong cách mềm mại có thể sử dụng độ bo lớn hơn.
Khi lựa chọn giá trị, nên cân nhắc kích thước thành phần, khoảng cách xung quanh và phong cách chung của website. Quan trọng nhất là các thành phần cùng nhóm nên có cách bo góc tương đồng để giao diện Web Mới xây dựng có cảm giác thống nhất và dễ sử dụng.
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.
- 0 Bình luận
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 *
