Урок 38. Свойство border для создания границ в CSS

📝

Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.

📋 Задание

При помощи свойства border-width сделайте толщину границы равной 10px.

Для создания границы вокруг элемента используется универсальное свойство border. При помощи него можно устанавливать цвет, толщину и стиль линий рамки. Значения можно указывать в любом порядке через пробел. Рассмотрим синтаксис:

div {
    border: width style color;
}

Снова повторюсь, что width, style, color могут быть в любой последовательности. Значение width, это толщина границы, измеряемая в допустимых для CSS единицах измерения. Значение color, это цвет рамки, значение тоже может быть любое, разрешенное в CSS. Значение style устанавливает стиль границы, и он может быть следующим:

dotted - пунктирная линия
dashed - тоже пунктирная, но штрихи чуть-чуть длиннее
solid - обычная, сплошная линия
double - двойная сплошная линия
groove - градиент с затемнением наружу
ridge - градиент с затемнением внутрь
inset - тоже градиент
outset - и это градиент

Далее посмотрим пример создания границы толщиной 2 пикселя, сплошной и черного цвета:

div {
    border: 2px solid #000;
}

Совместно со свойством border можно использовать свойства border-color, border-width и border-style. При помощи border-color можно устанавливать цвета для левой, верхней, правой и нижней границы отдельно. Аналогично, свойство border-width поможет изменить толщину рамки с каждой стороны по отдельности. Со свойством border-style все так же, только задает стиль границы. Далее пример:

div {
    border: 2px solid #000;
    border-color: #000 #555;
    border-width: 10px 5px 10px 5px;
    border-style: inset groove solid;
}

Что означает количество значений, перечисленное через пробел:

1 значение - граница задается со всех сторон одинаково;
2 значения - первое задает от верхнего и нижнего краёв, второе от левого и правого краёв;
3 значения - первое от верхнего, второе от левого и правого, третье от нижнего краёв;
4 значения - задает от всех краёв в следующей последовательности: верх, право, низ, лево.

В CSS есть возможность скруглять уголки рамки, а если она не установлена, то скругляется фон. Для этого используется свойство border-radius. Допустимо писать от одного до четырех значений, причем каждое можно писать через косую черту (радиус по горизонтали/радиус по вертикали). Далее рассмотрим пример:

div {
    border-radius: 5px;
    border-radius: 5px 10px;
    border-radius: 5px/10px 20px/5px;
    /* и так далее */
}

1 значение - уголки скругляются со всех сторон одинаково.
2 значения - первое задает для верхнего левого и нижнего правого уголков, второе для правого верхнего и нижнего левого.
3 значения - первое задает для верхнего левого уголка, второе для правого верхнего и левого нижнего, а третье, для правого нижнего уголка.
4 значения - задает для всех уголков в следующей последовательности: левый верхний, правый верхний, правый нижний и левый нижний.

📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.

Урок 39. Свойство outline для создания внешних границ в CSS