Rounded Corner trong CSS

Thanh Huyen

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

#rcorners1 {
  border-radius: 25px;
  background: #58257b;
  color:white;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

2. Bo tròn các góc của một phần tử có viền bên ngoài

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #58257b;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

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

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; }

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

Góc-1: top-left corner
Góc-2: top-right corner
Góc-3: bottom-right corner
Góc-4: bottom-left corner

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

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #58257b;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

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

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #58257b;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

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

#rcorners3 {
  border-radius: 15px 50px;
  background: #58257b;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

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

#rcorners4 {
  border-radius: 15px;
  background: #58257b;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

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ài trước: Specificity trong CSS

Bài tiếp: Border Image - Tạo đường viền bằng hình trong CSS

Thứ Ba, 23/04/2019 16:55

4,6 ★ 16 👨 5.476

#CSS

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!