Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
136. Свойство border для создания границ
Для создания границы вокруг элемента используется универсальное свойство 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
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
- При помощи свойства
border-width
сделайте толщину границы равной10px
.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.
Это займет не больше минуты.