Border-radius

Используя свойство border-radius вы можете к любому элементу добавить скругленные углы. Расмотрите представленные примеры:

div {
  height: 40px;
  width: 100px;
  margin: 10px;
}
.one1 {
  background: lime;
  border-radius: 15px;
}
.one2 {
  border: 2px solid lime;
  border-radius: 15px;
}

See the Pen border-radius by Alex (@Asmodey) on CodePen.

Помимо свойства border-radius, можно использовать расширенное свойство border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, которые определяют радиус скругления для каждого угла

Задание радиуса скругления каждому углу

В CSS3 поддерживается несколько способов записи border-radius:

1. Четыре значения:

1
border-radius: 10px 20px 30px 5px;
считая из левого верхнего угла. Пример:

See the Pen eNPPRM by Alex (@Asmodey) on CodePen.

2. Три значения:

1
  border-radius: 15px 50px 30px
Данный код равносилен коду border-radius: 15px 50px 30px 50px;

3. Два значения:

1
  border-radius: 15px 30px;
Код равносилен: border-radius: 15px 30px 15px 30px;

Выполнить

Задание 1. Создайте элемент div размером 200 На 200px. Задайте ему радиусы скругления:

  • 25px
  • 15px 30px
  • 15px 80px 30px
  • 0 0 15px 45px

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *