Радиус скругления углов (border-radius): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Практические задания по работе со свойством border-radius. Научитесь создавать скругленные углы, круги, сложные формы и анимации. Все задания выполняются путем дописывания недостающих частей CSS-кода.

Список тем

Базовое скругление

Сделайте все углы элемента с классом .box скругленными на 15px.

CSS

.box {
  width: 200px;
  height: 100px;
  background: #2ecc71;
  border-radius: input1;
}

                     .box {
  width: 200px;
  height: 100px;
  background: #2ecc71;
  border-radius: input1;
}

HTML

<div class="box"></div>

Используйте свойство border-radius с одним значением

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Эллиптический радиус

Создайте эллиптическое скругление с горизонтальным радиусом 30px и вертикальным 50px

CSS

.oval {
  width: 200px;
  height: 100px;
  background: #3498db;
  border-radius: input1 / input2;
}

                     .oval {
  width: 200px;
  height: 100px;
  background: #3498db;
  border-radius: input1 / input2;
}

HTML

<div class="oval"></div>

Используйте синтаксис с двумя значениями через /

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отдельные углы

Скруглите только правые углы элемента: верхний-правый 20px, нижний-правый 40px

CSS

.shape {
  width: 150px;
  height: 150px;
  background: #e74c3c;
  border-radius: input1;
}

                     .shape {
  width: 150px;
  height: 150px;
  background: #e74c3c;
  border-radius: input1;
}

HTML

<div class="shape"></div>

Используйте сокращенную запись border-radius с четырьмя значениями

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Круглая аватарка

Сделайте изображение кругом с белой рамкой 4px

CSS

.avatar {
  width: 120px;
  height: 120px;
  border: 4px solid #fff;
  border-radius: input1;
}

                     .avatar {
  width: 120px;
  height: 120px;
  border: 4px solid #fff;
  border-radius: input1;
}

HTML

<img class="avatar" src="https://naytikurs.ru/img/5.png">

Используйте 50% для border-radius и добавьте border

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Анимированные углы

Добавьте анимацию изменения радиуса от 0 до 50px при наведении

CSS

.animated-box {
  width: 200px;
  height: 100px;
  background: #9b59b6;
  transition: input1 0.5s;
}

.animated-box:hover {
  border-radius: input2;
}

                     .animated-box {
  width: 200px;
  height: 100px;
  background: #9b59b6;
  transition: input1 0.5s;
}

.animated-box:hover {
  border-radius: input2;
}

HTML

<div class="animated-box"></div>

Используйте псевдокласс :hover и transition

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сложная форма

Создайте элемент с разными радиусами: верх-лево 10px, верх-право 30px, низ-право 50px, низ-лево 5px

CSS

.complex-shape {
  width: 200px;
  height: 200px;
  background: #f1c40f;
  border-radius: input1;
}

                     .complex-shape {
  width: 200px;
  height: 200px;
  background: #f1c40f;
  border-radius: input1;
}

HTML

<div class="complex-shape"></div>

Используйте четыре значения через пробел в правильном порядке

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку