CSS закругленные углы
CSS закругленные углы
С помощью свойства CSS border-radius
вы можете придать любому элементу «закругленные углы».
Свойство CSS border-radius
Свойство CSS
border-radius
определяет радиус углов элемента.
Совет: это свойство позволяет добавлять к элементам закругленные углы!
Вот три примера:
1. Закругленные углы для элемента с заданным цветом фона:
Закругленные углы!
2. Закругленные углы для элемента с рамкой:
Закругленные углы!
3. Закругленные углы для элемента с фоновым изображением:
Закругленные углы!
Вот код:
Пример
#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;
}
Совет: Свойство border-radius
на самом деле является сокращенным свойством для
свойств border-top-left-radius
, border-top-right-radius
и .border-bottom-right-radius
border-bottom-left-radius
CSS border-radius — указать каждый угол
Свойство border-radius
может иметь от одного до четырех значений. Вот правила:
Четыре значения - радиус границы: 15px 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу):
Три значения - радиус границы: 15px 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углам, а третье значение применяется к нижнему правому углу):
Два значения - радиус границы: 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;
}
Вы также можете создать эллиптические углы:
Пример
#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;
}
Свойства закругленных углов CSS
Property | Description |
---|---|
border-radius | A shorthand property for setting all the four border-*-*-radius properties |
border-top-left-radius | Defines the shape of the border of the top-left corner |
border-top-right-radius | Defines the shape of the border of the top-right corner |
border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |