CSS закругленные углы

Оглавление

    Показать оглавление

CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

Свойство CSS border-radius

CSS Свойство border-radius определяет радиус углы элемента.

Совет. Это свойство позволяет добавлять закругленные углы к элементы!

Вот три примера:

1. Скругленные углы для элемента с заданным цветом фона:

Rounded corners!

2. Закругленные углы для элемента с рамкой:

Rounded corners!

3. Скругленные углы для элемента с фоновым изображением:

Rounded corners!

Вот код:

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}

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

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

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>

Совет. Свойство border-radius на самом деле является сокращенным свойством border-top-left-radius, border-top-right-radius, border-bottom-right-radius и свойства border-bottom-left-radius.

CSS border-radius — укажите каждый угол

Свойство border-radius может иметь от одного до четырех значений. Вот правила:

Четыре значения — border-radius: 15px 50px 30px 5px; (первое значение применяется к левому верхнему углу, второе значение применяется к правому верхнему углу, третье значение применяется к правому нижнему углу и четвертое значение относится к левому нижнему углу):

Три значения — border-radius: 15px 50px 30px; (первое значение применяется к левому верхнему углу, второе значение применяется к правому верхнему и левому нижнему углам, а третье значение применяется к правому нижнему углу). ):

Два значения — border-radius: 15px 50px; (первое значение применяется к левому верхнему и правому нижнему углам, а второе значение применяется к правому верхнему и левому нижнему углам):

Одно значение — border-radius: 15px; (значение применяется ко всем четырем углам, которые закруглены одинаково:

Вот код:

Пример

  #rcorners1 {
  border-radius: 15px 50px 30px 5px;
  
background: #73AD21;
  padding: 20px; 
  
width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
     background: #73AD21;
  
padding: 20px; 
  width: 200px;
  
height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
     
height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
     background: #73AD21;
  
padding: 20px; 
  width: 200px;
  height: 150px; 
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

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

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

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
} 
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>

<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>

<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>

<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>

</body>
</html>

Вы также можете создать эллиптические углы:

Пример

  #rcorners1 {
  border-radius: 50px / 15px;
  
background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
     
padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
     
border-radius: 50%;
  background: #73AD21;
  
padding: 20px; 
  width: 200px;
  height: 150px;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
} 
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>

<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>

<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>

</body>
</html>

Свойства закругленных углов CSS

border-radius

Сокращенное свойство для установки всех четырех свойств border-*-*-radius.

border-top-left-radius

Определяет форму границы верхнего левого угла.

border-top-right-radius

Определяет форму границы верхнего правого угла.

border-bottom-right-radius

Определяет форму границы правого нижнего угла.

border-bottom-left-radius

Определяет форму границы нижнего левого угла.