Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока
@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

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

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Свойство outline для создания внешних границОтступы, рамки, поля
Свойство background для работы с фономЦвета и фон
Переменные, комментарии и типы данных в PHPКурс по PHP
Первое знакомство с PythonЗнакомство с Python
Поиск хостов с помощью NmapРазведка и сканирование
Добавляем градиент к фону элементаЦвета и фон
Написание модулей в PythonЗнакомство с Python
Управляющие последовательности в JavaScriptТипы и переменные
Обработка исключений (try/except) в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

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

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

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

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

Закрыть окно