Свойство-сокращение для границы в CSS

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

Давайте посмотрим на примере. Пусть у нас есть вот такая граница:

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Перепишем ее через свойство-сокращение:

css#elem {
  border: 1px solid red;
  width: 300px;
  height: 100px;
}
Задание 1

Повторите страницу по данному образцу:

Задание 2

Повторите страницу по данному образцу:

Задание 3

Повторите страницу по данному образцу:

Задание 4

Повторите страницу по данному образцу: