Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Свойство border для создания границ

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

Код CSS
div {
border: width style color;
}

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

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

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

Код CSS
div {
border: 2px solid #000;
}

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

Код CSS
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. Допустимо писать от одного до четырех значений, причем каждое можно писать через косую черту (радиус по горизонтали/радиус по вертикали). Далее рассмотрим пример:

Код CSS
div {
border-radius: 5px;
border-radius: 5px 10px;
border-radius: 5px/10px 20px/5px;
/* и так далее */
}
  • 1 значение - уголки скругляются со всех сторон одинаково.
  • 2 значения - первое задает для верхнего левого и нижнего правого уголков, второе для правого верхнего и нижнего левого.
  • 3 значения - первое задает для верхнего левого уголка, второе для правого верхнего и левого нижнего, а третье, для правого нижнего уголка.
  • 4 значения - задает для всех уголков в следующей последовательности: левый верхний, правый верхний, правый нижний и левый нижний.
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.