Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

150. Свойство 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 значения - задает для всех уголков в следующей последовательности: левый верхний, правый верхний, правый нижний и левый нижний.

Похожие уроки и записи блога

Свойство outline для создания внешних границОтступы, рамки, поля
Свойство background для работы с фономЦвета и фон
Рамки для таблиц, строк и ячеек в HTMLТаблицы
Первое знакомство с PythonЗнакомство с Python
Добавляем градиент к фону элементаЦвета и фон
Универсальные атрибуты в HTMLРазметка текста
Управляющие последовательности в JavaScriptТипы и переменные
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Погружение в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно