Справочники CSS3 border-radius

Что такое border-radius в CSS3?

Свойство border-radius задает округление углов в объекте. В качестве значения указывается значение в пикселях, процентах или других единицах измерения.


  1. Если указывать лишь одно значение, то задается отступ для всех углов: право, лево, верх и низ (border-radius: 50px);
  2. Если указывать два значения, то первое контролирует верхний и нижний правый угол, а второе левый верхний и нижний угол (border-radius: 50px 10px);
  3. Если указывать три значения, то первое контролирует верхний левый угол, второе верхний правый и нижний левыйугол, а третье нижний правый угол (border-radius: 50px 10px 30px);
  4. Если указывать четыри значения, то первое контролирует верхний левый угол, второе - верхний правый угол, третье - нижний правый угол и четвертое - нижний левый угол (border-radius: 50px 10px 30px 10px).


Пример свойства:
div {
	border-radius: 50px;
	padding: 5%;
	width: 90%;
	background: #A14433;
	color: #fff;
}

Результат:


Блок с текстом и округленными углами
Комментарии
Добавить комментарий

Пока комментариев нет