Rounded Corner trong CSS
Rounded Corner trong CSS là việc sử dụng thuộc tính border-radius để bo tròn góc cạnh các phần tử.
Thuộc tính Border-radius trong CSS
Thuộc tính Border-radius trong CSS được sử dụng để xác định bán kính của các góc của phần tử và bo tròn nó theo bán kính ấy.
Ví dụ:
1. Bo tròn các góc của một phần tử có màu nền được chỉ định
![]() |
|
2. Bo tròn các góc của một phần tử có viền bên ngoài
![]() |
|
3. Bo tròn các góc của một phần tử với background là một hình xác định
![]() |
|
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #58257b;
color: white;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #58257b;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(pink-paper.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>Thuộc tính border-radius</h1>
<p>Bo tròn các góc của một phần tử có màu nền được chỉ định:</p>
<p id="rcorners1">Rounded Corner trong CSS</p>
<p>Bo tròn các góc của một phần tử có viền bên ngoài:</p>
<p id="rcorners2">Rounded Corner trong CSS</p>
<p>Bo tròn các góc của một phần tử với background là một hình xác định</p>
<p id="rcorners3">Rounded Corner trong CSS</p>
</body>
</html>
Giá trị các góc của border-radius
Thuộc tính border-radius có thể có từ một đến bốn giá trị. Đầu tiên bạn cần phân biệt các góc trong một phần tử:
![]() |
|
1. Trường hợp border-radius có 4 giá trị
Bốn giá trị này sẽ tương ứng với 4 góc: border-radius: góc-1 góc-2 góc-3 góc-4
Ví dụ:
![]() |
|
2. Trường hợp border-radius có 3 giá trị
Ba giá trị này tương ứng như sau:
- Giá trị thứ nhất: Góc -1
- Giá trị thứ hai: Góc-2 và Góc-4
- Giá trị thứ ba: Góc-3
Ví dụ:
![]() |
|
3. Trường hợp border-radius có 2 giá trị
Hai giá trị này tương ứng như sau:
- Giá trị thứ nhất: Góc -1 và Góc-3
- Giá trị thứ hai: Góc-2 và Góc-4
Ví dụ:
![]() |
|
4. Trường hợp border-radius có 1 giá trị
Giá trị này áp dụng với cả 4 góc, tạo nên một hình có các góc bằng nhau
Ví dụ:
![]() |
|
Code đầy đủ:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #58257b;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #58257b;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #58257b;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #58257b;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>Giá trị các góc của border-radius</h1>
<p>Bốn giá trị - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Ba giá trị - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>Hai giá trị - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>Một giá trị - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
Cách sửa lỗi không thấy bộ điều hợp mạng trên Windows 10
Hôm qua -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Dynamic System Updates là gì?
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua -
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
Valentine đen là gì? Valentine đen là ngày nào?
Hôm qua