HỌC VIỆN ĐÀO TẠO TRỰC TUYẾN-TẬN TÂM-CHẤT LƯỢNG: 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

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

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

Pages

Thứ Bảy, 18 tháng 5, 2019

Rounded Corner trong CSS

Thuộc tính Border-radius trong CSS

Giá trị các góc của border-radius

1. Trường hợp border-radius có 4 giá trị

2. Trường hợp border-radius có 3 giá trị

3. Trường hợp border-radius có 2 giá trị

4. Trường hợp border-radius có 1 giá trị