что такое border в css
CSS свойство border
В языке CSS за оформление рамок или обводок отвечает свойство border, а точнее, четыре свойства, названия которых начинаются с этого слова. Они позволяют вебмастеру управлять цветом, внешним видом, толщиной и формой углов рамки, которая обрамляет содержимое какого-либо блока.
Синтаксис и значения border
Например, создадим элемент и применим к нему свойства:
Значения свойства border здесь указывают, что у элемента должна быть рамка толщиной 2px, сплошная (solid), и красного цвета.
border-style
С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).
Ниже перечислены значения, которые можно задать свойству, и эффекты, которые при этом появляются.
solid сплошная линия none по умолчанию – линии нет double двойная линия dashed пунктир dotted набор точек groove придание линии вогнутости ridge придание линии выпуклости inset эффект вдавленности блока outset эффект выпуклости блока
Примечание: при использовании стиля dashed соотношение длины штриха и ширины пробела зависит от браузера, в котором открыт сайт.
border-width
Толщина линии, образующей рамку, может задаваться как словом, так и количеством пикселей.
Числовая величина, измеряемая в px, em, rem, vh и vw. thin Эквивалент 1px medium Эквивалент 3px thick Эквивалент 5px
border-color
Цвет рамки можно задавать несколькими способами:
Цвет по умолчанию – black (черный). Установка значения transparent (border-color: transparent) означает полностью прозрачную рамку.
Примеры записи цвета:
border-radius
С помощью свойства можно уходить от квадратных углов, вводя величину радиуса скругления.
На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:
Для каждого угла можно задать свой радиус скругления.
Так, для квадрата на примере ниже, задано такое свойство:
Значения устанавливаются для углов по часовой стрелке.
Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.
| Количество значений свойства | Результат |
|---|---|
| 1 | Все стороны выполнены в одном стиле |
| 2 | Стиль устанавливается отдельно для горизонтальных (1-е значение) и вертикальных границ (2-е значение) |
| 3 | 1-е значение – верх лево; 2-е – верх право и низ лево; 3-е – низ право. |
| 4 | Все границы выполнены в разных стилях. Соответствие значениям (с 1-го по 4-е) – по часовой стрелке, начиная с верхней. |
Интересно, что для каждого угла можно задать два параметра скругления через знак слэша. При этом первая величина – горизонтальный радиус, вторая – вертикальный. Показать это лучше на примере. Вот что получится, если для фигуры задать свойство:
Необходимо иметь в виду, что при задании свойства border-radius форма блока остается прежней, то есть прямоугольной, и при больших значениях радиусов, запланированная рамка вокруг текста может попасть на сам текст.
Более детальные свойства
Существует и другой способ сделать обводку или придать ей определенный стиль для конкретной стороны рамки или угла. Для этого предусмотрены специальные расширения свойств, в названия которых входит обозначение стороны границы. Верхняя обозначается как top, нижняя – bottom, левая – left и правая – right.
CSS-свойство border
Свойство border позволяет определять стиль, ширину и цвет границ рамки CSS :
Свойство border-style
Свойство border-style определяет тип отображения границы.
Это свойство принимает следующие значения:
Свойство border-style может принимать от одного до четырех значений ( для верхней, правой, нижней и левой границ ).
Примечание: ни одно из представленных далее CSS-свойств для оформления границ не будет работать до тех пор, пока border-style не установлено.
Свойство border-width
Свойство border-width может иметь от одного до четырех значений ( для верхней, правой, нижней и левой рамки CSS ).
Свойство border-color
Свойство border-color используется для указания цвета четырех границ.
Цвет можно установить с помощью:
Свойство border-color может иметь от одного до четырех значений ( для верхней, правой, нижней и левой границ ).
Если значение border-color не установлено, то наследуется цвет элемента.
Border: отдельная стилизация границ
Приведенный выше пример даст тот же результат, что и:
Если у свойства border-style четыре значения:
• border-style: dotted solid double dashed;
o верхняя граница будет точечной.
o правая граница будет сплошной.
o нижняя CSS двойная рамка.
o левая граница будет в штрих.
Если у свойства border-style три значения:
• border-style: dotted solid double;
o верхняя граница будет точечной.
o правая и левая границы будут сплошными.
o нижняя граница будет двойной.
Если у свойства border-style два значения:
• border-style: dotted solid;
o верхняя и нижняя CSS рамки вокруг изображения будут точечными.
o правая и левая границы будут сплошными.
Если у свойства border-style одно значение:
• border-style: dotted;
o все четыре границы будут точечными.
Короткое свойство border
Чтобы сократить объем кода, значение для каждой отдельной границы можно указывать одним свойством:
Также можно выставлять свойства какой-то конкретной границы с одной из сторон:
Свойство border-radius используется для создания закругленных углов у CSS рамки вокруг текста или другого элемента.
Примечание: свойство border-radius не поддерживается в IE 8 и более ранних версиях.
Все свойства границ в CSS
Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!
Свойство border: границы для блоков
Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.
Border-width: ширина границы
С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:
Кроме этого, существуют ключевые слова для обозначения ширины границы:
Border-color: цвет границы
Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB — зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.
Также можно задать прозрачный цвет, записав:
Border-style: стиль границы
Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную — существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:
Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.
Общее CSS-свойство border: 3 в 1
Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:
Границы для отдельных сторон
При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:
Итоги
Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.
Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:
Но это слишком длинная запись. Всё это можно записать короче:
Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.
Мини-задание
Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:
В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):
CSS: border. Границы элемента.
| Значение по умолчанию | Зависит от элемента |
|---|---|
| Применяется | К любым элементам |
| Наследуется | Нет |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Рассмотрим каждое из значений по отдельности.
Свойство border-style. Стиль границы.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
Примеры того, как они выглядят.
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Свойство border-width. Толщина границы.
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
Свойство border-color. Цвет границы.
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
Установка значений для сторон отдельно
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы ( border-top ).
Параметры правой границы ( border-right ).
Параметры нижней границы ( border-bottom ).
Параметры левой границы ( border-left ).
Пример использования этих свойств:
Свойство border-radius. Округление углов границы.
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех углов блока. |
| 2 | Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла. |
| 3 | Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. |
CSS Borders
Свойства границы CSS
Свойства CSS border позволяют задавать стиль, ширину и цвет границы элемента.
У меня есть границы со всех сторон.
У меня есть красная Нижняя граница.
У меня округлые границы.
У меня синяя левая граница.
Стиль границы
Свойство border-style указывает тип отображаемой границы.
Допустимы следующие значения:
Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Пример
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
Ширина границы
Свойство border-width задает ширину четырех границ.
Ширина может быть задана как конкретный размер (в px, PT, cm, EM и т.д.) или с помощью одного из трех предварительно определенных значений: тонкий, средний, или толстый.
Свойство border-width может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Пример
p.one <
border-style: solid;
border-width: 5px;
>
p.two <
border-style: solid;
border-width: medium;
>
p.three <
border-style: solid;
border-width: 2px 10px 4px 20px;
>
Цвет границы
Свойство border-color используется для задания цвета четырех границ.
Цвет может быть установлен:
Свойство border-color может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Если border-color не задан, он наследует цвет элемента.
Пример
p.one <
border-style: solid;
border-color: red;
>
p.two <
border-style: solid;
border-color: green;
>
p.three <
border-style: solid;
border-color: red green blue yellow;
>
Граница-отдельные стороны
Из приведенных выше примеров видно, что можно указать другую границу для каждой стороны.
В CSS есть также свойства для указания каждой из границ (верхняя, правая, Нижняя и левая):
Пример
Приведенный выше пример дает тот же результат:
Пример
Итак, вот как это работает:
Если свойство border-style имеет четыре значения:
Если свойство border-style имеет три значения:
Если свойство border-style имеет два значения:
Если свойство border-style имеет одно значение:
Граница-Сокращенное свойство
Как видно из приведенных выше примеров, есть много свойств, которые следует учитывать при работе с границами.
Чтобы сократить код, можно также указать все свойства отдельных границ в одном свойстве.
Свойство border является сокращенным свойством для следующих отдельных свойств границы:
Пример
Можно также указать все свойства отдельных границ только для одной стороны: