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 является сокращенным свойством для следующих отдельных свойств границы:
Пример
Можно также указать все свойства отдельных границ только для одной стороны:
Границы в CSS (border, border-style, border-width, border-color, border-radius)
Стиль рамки (border-style)
— нет границ (толщина границ равна нулю)
— нет границ (то же самое, что и none)
— граница в виде точек
— граница в виде штрихов
— двойная сплошная линия
— линия в виде канавки или паза
— противоположность к groove
— рамка с тенью с одной стороны
Толщина рамки (border-width)
Цвет рамки (border-color)
Скругление краёв (border-radius)
Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес support@mousedc.ru. Мы обязательно ответим.
Также Вы можете отправить нам свой отзыв на наши слуги, замечание или предложение. Мы ценим наших клиентов и внимательно прислушиваемся ко всем замечаниям!
Коврик для мыши новым клиентам
Оплатите хостинг на год и получите удобный коврик
Помощь в переносе
с другого хостинга
Хотите переехать? Мы поможем перенести всё
Запишитесь на интенсивные курсы по созданию сайтов.
Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.
