Границы элементов (border)

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

Опубликовано 17.03.2025
Просмотры 11
Автор
Рек. время прохождения 2 минуты
Упражнений 10
Комментарии 0
Тренажер CSS

В этом тренажере вы попрактикуетесь в использовании CSS-свойства `border` и его производных (`border-style`, `border-width`, `border-color`, `border-top`, `border-right`, `border-bottom`, `border-left`, а также сокращенной записи `border`). Вы будете создавать рамки различной толщины, стиля и цвета для разных HTML-элементов. Задания построены от простого к сложному, позволяя вам постепенно освоить все аспекты работы с границами.

Список тем

Простая сплошная граница

Создайте красную сплошную границу толщиной 2 пикселя для элемента `div` с классом `box`. Свойство `border` позволяет одновременно установить стиль, толщину и цвет границы.

CSS
.box {
  input1: 2px solid red;
}
HTML
<div class="box">Содержимое блока</div>
Используйте свойство `border` в CSS, чтобы задать стиль, толщину и цвет границы одним выражением. Например: `border: 2px solid red;`
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Разные стили границ

Задайте для элемента `div` с классом `box` следующие стили границ: верхняя - пунктирная (dotted), правая - сплошная (solid), нижняя - двойная (double), левая - штриховая (dashed). Толщину и цвет границ оставьте по умолчанию (браузер сам определит).

CSS
.box {
  input1-top-style: dotted;
  border-right-input2: solid;
  border-bottom-style: input3;
  border-left-style: dashed;
}
HTML
<div class="box">Содержимое блока</div>
Используйте свойства `border-top-style`, `border-right-style`, `border-bottom-style` и `border-left-style` для задания разных стилей границ.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Разная толщина границ

Задайте для элемента `div` с классом `box` разную толщину границ: верхняя - 1px, правая - 3px, нижняя - 5px, левая - 2px. Стиль и цвет границ оставьте по умолчанию.

CSS
.box {
  input1-top-width: 1px;
  border-right-width: input2;
  border-bottom-width: 5px;
  border-left-input3: 2px;
 border-color:red;
border-style: solid;
}
HTML
<div class="box">Содержимое блока</div>
Используйте свойства `border-top-width`, `border-right-width`, `border-bottom-width` и `border-left-width` для задания разной толщины границ.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Разные цвета границ

Задайте разные цвета для каждой границы элемента `div` с классом `box`. Используйте любые цвета, кроме черного и белого. Толщину и стиль границ оставьте по умолчанию.

CSS
.box {
  border-top-color: red;
  border-right-input1: blue;
  border-bottom-color: input2;
  border-left-color: yellow;
 border-style: solid;
}
HTML
<div class="box">Содержимое блока</div>
Используйте свойства `border-top-color`, `border-right-color`, `border-bottom-color` и `border-left-color` для задания разных цветов границ.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Сокращенная запись border

Используйте сокращенную запись свойства `border` для создания рамки вокруг элемента `div` с классом `box`. Задайте толщину 4px, стиль `groove` и любой цвет, кроме черного и белого.

CSS
.box {
  input1: 4px groove green;
}
HTML
<div class="box">Содержимое блока</div>
Свойство `border` позволяет задать толщину, стиль и цвет границы в одной строке. Например: `border: 4px groove blue;`
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Граница для изображения

Добавьте рамку для изображения. Используйте сокращенную запись свойства `border`. Толщина - 5px, стиль - `ridge`, цвет - любой, кроме черного и белого.

CSS
input1 {
  border: 5px ridge blue;
}
HTML
<img src="https://naytikurs.ru/img/1.png" alt="Пример изображения">
Примените свойство `border` к селектору `img`. Например: `img { border: 5px ridge red; }`
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Разные границы для разных сторон изображения

Сделайте для изображения разные границы: верхняя и нижняя - сплошные толщиной 3px, левая и правая - пунктирные толщиной 2px. Цвет границ - любой, кроме черного и белого.

CSS
img {
  border-top: 3px input1 red;
  border-bottom: input2 solid blue;
  border-left: 2px dotted green;
  border-right: 2px input3 yellow;
}
HTML
<img src="https://naytikurs.ru/img/2.png" alt="Пример изображения">
Используйте комбинацию свойств `border-top`, `border-bottom`, `border-left` и `border-right`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Убираем границу

У элемента .box изначально задана сплошная граница. Уберите ее.

CSS
.box {
 border: 1px solid black; 
}
.box{
 input1: none;
}
HTML
<div class="box">Содержимое блока</div>
Используйте свойство border со значением none.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стили границ: inset и outset

Задайте для элемента `div` с классом `box` границы. Для верхней и левой задайте стиль `inset`, а для нижней и правой `outset`. Толщину укажите 3px, а цвет любой, кроме белого и черного.

CSS
.box {
  border-top-input1: inset;
  border-right-style: input2;
  border-bottom-style: outset;
  border-left-style: inset;
  border-width: 3px;
  border-color: blue;
}
HTML
<div class="box">Содержимое блока</div>
Используйте свойства `border-top-style`, `border-right-style`, `border-bottom-style`, `border-left-style`, `border-width`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

border-style: hidden

Задайте границу для элемента .box, но сделайте ее невидимой, сохранив при этом занимаемое ей место. Толщина границы 5px.

CSS
.box {
 border-width: 5px;
 input1-style: hidden;
 border-color: red;
}
HTML
<div class="box">Содержимое</div>
Используйте свойство border-style со значением hidden.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру