Что такое border-radius в CSS3?
Свойство border-radius
задает округление углов в объекте. В качестве значения указывается значение в пикселях, процентах или других единицах измерения.
- Если указывать лишь одно значение, то задается отступ для всех углов: право, лево, верх и низ (border-radius: 50px);
- Если указывать два значения, то первое контролирует верхний и нижний правый угол, а второе левый верхний и нижний угол (border-radius: 50px 10px);
- Если указывать три значения, то первое контролирует верхний левый угол, второе верхний правый и нижний левыйугол, а третье нижний правый угол (border-radius: 50px 10px 30px);
- Если указывать четыри значения, то первое контролирует верхний левый угол, второе - верхний правый угол, третье - нижний правый угол и четвертое - нижний левый угол (border-radius: 50px 10px 30px 10px).
Пример свойства:
div {
border-radius: 50px;
padding: 5%;
width: 90%;
background: #A14433;
color: #fff;
}
Результат:
Блок с текстом и округленными углами
Комментарии