border | CSS
Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.
Прозрачный border CSS
Чтобы сделать прозрачный border следует цвет написать в rgba: теория, конвертер.
Один блок находится внутри другого. Сквозь полупрозрачную границу нужно увидеть фон родителя. Если у потомка есть свой собственный фон, то требуется его (фон дочернего элемента) убрать с границы обводки блока.
Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline . 
Внутренний border . Управление длиной блока
Если задано width: auto; , то ширина элемента равна ширине родителя. Она не увеличивается за счёт margin , border и padding .
В остальных случаях border , как и padding , расширяет коробку элемента. То есть если неправильно рассчитать width , то блок переместится вниз, не поместившись в ограниченное пространство, меню будет некрасиво удлиняться и т.п.. Дабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box; . Тогда border и padding не будут влиять на ширину контейнера элемента.
border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;
Пунктирная обводка внутри HTML блока
Задача: пройти пунктиром по периметру на некотором расстоянии от краёв элемента. Эффект будет такой, как будто на швейной машинке прошили полотно и остались на ткани стежки. Если у кнопки углы закругленны, фон задан градиентом или картинкой, текст должен выделяться мышкой и нужно обойтись одним тегом, то единственно верным решением будет воспользоваться :after:
Рамка в процентах
Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow , и outline . Для однотонных линий можно использовать background . Из-за того, что не хочется лишаться padding , нужен ещё и :after :
Вдавленная линия CSS
Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.
CSS: border. Границы элемента.
Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.
| Значение по умолчанию | Зависит от элемента |
|---|---|
| Применяется | К любым элементам |
| Наследуется | Нет |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border |
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.
- border-style — стиль границы.
- border-width — ширина границы.
- border-color — цвет границы.
Рассмотрим каждое из значений по отдельности.
Свойство border-style. Стиль границы.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
- none — граница отсутствует (по умолчанию).
- solid — сплошная граница.
- double — двойная граница.
- dashed — пунктирная граница.
- dotted — граница из ряда точек.
- ridge — граница «гребень».
- groove — граница «бороздка».
- inset — вдавленная граница.
- outset — выдавленная граница.
Примеры того, как они выглядят.
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.
При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.
Свойство border-width. Толщина границы.
Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
- thin — тонкая граница;
- medium — средняя толщина;
- thick — толстая граница;
Свойство border-color. Цвет границы.
Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS», а именно:
- Шестнадцатеричная запись ( #ff00aa ) цвета.
- Формат RGB — rgb(255,12,110) . Формат RGBA для CSS3.
- Форматы HSL и HSLA для CSS3.
- Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS.
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
Установка значений для сторон отдельно
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
- border-top (верхняя граница)
- border-right (правая граница)
- border-bottom (нижняя граница)
- border-left (левая граница)
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы ( border-top ).
- border-top-color — задаёт цвет верхней границы элемента.
- border-top-width — задаёт толщину верхней границы элемента.
- border-top-style — задаёт стиль верхней границы элемента.
Параметры правой границы ( border-right ).
- border-right-color — задаёт цвет правой границы элемента.
- border-right-width — задаёт толщину правой границы элемента.
- border-right-style — задаёт стиль правой границы элемента.
Параметры нижней границы ( border-bottom ).
- border-bottom-color — задаёт цвет нижней границы элемента.
- border-bottom-width — задаёт толщину нижней границы элемента.
- border-bottom-style — задаёт стиль нижней границы элемента.
Параметры левой границы ( border-left ).
- border-left-color — задаёт цвет левой границы элемента.
- border-left-width — задаёт толщину левой границы элемента.
- border-left-style — задаёт стиль левой границы элемента.
Пример использования этих свойств:
Свойство border-radius. Округление углов границы.
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех углов блока. |
| 2 | Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла. |
| 3 | Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. |
Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.
Свойство border в CSS
Давайте изучим Свойство border в CSS, которое позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.
Стиль границы
Свойство border-style позволяет определить тип ( стиль ) границы.
Это свойство принимает разные значения :
- dotted – граница в точку;
- dashed – граница в штрих;
- solid – цельная граница;
- double – двойная граница;
- groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
- ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
- inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color ;
- outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color ;
- none – отключение;
- hidden – скрытые границы.
У свойства HTML border style может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).
Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style !
Border Width CSS
Свойство border-width определяет ширину границы по любой из четырех сторон элемента.
Ширину можно указывать как в единицах измерения ( px, pt, cm, em и т. д. ), так и с помощью ключевых слов: thin , medium или thick .
У свойства border-width может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).
Border Color CSS
Свойство HTML border-color используется, чтобы указать цвет границы для одной из четырех сторон элемента.
Цвет можно указывать несколькими способами :
- Названием – вписывается название цвета ( например, red );
- Hex – указывается hex-значение цвета ( например, #FF0000 );
- RGB – указывается RGB-значение цвета ( например, rgb(255,0,0) );
- transparent ( прозрачная ).
У свойства border-color может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).
Если не выставить свойство border-color , то границы будут наследовать цвет элемента.
Стилизация границ по-отдельности
В CSS есть свойства border HTML для определения стиля каждой стороны элемента ( top, right, bottom и left ).
Подобного результата можно добиться и следующим методом:
Как это работает
Если у свойства HTML border style будет четыре значения:
- border-style: dotted solid double dashed ;
- верхняя граница имеет значение dotted ;
- правая граница имеет значение solid ;
- нижняя граница имеет значение double ;
- левая граница имеет значение dashed .
Если у border-style будет три значения:
- border-style: solid dotted double ;
- верхняя граница имеет значение dotted ;
- правая и левая границы имеют значение solid ;
- нижняя граница имеет значение double .
Если у border-style будет два значения:
- border-style: solid dotted ;
- верхняя и нижняя границы имеют значение dotted ;
- правая и левая границы имеют значение solid .
Если у HTML border style будет одно значение:
- border-style: dotted ;
- то все четыре границы будут иметь значение dotted .
В примерах, приведенных выше, мы использовали свойство border-style . Но учтите, что те же правила применения касаются и border-width , и border-color .
Сокращенное свойство border
Как видно из примеров, при стилизации границ элементов нужно применять довольно много разных свойств. Чтобы сократить код, можно использовать специальное свойство border :
- border-width ;
- border-style ( обязательно );
- border-color .
Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.
Левая граница
Нижняя граница
Закругленные границы
Свойство HTML border radius позволяет оформить элемент границами с закругленными углами.
Примечание: свойство border-radius не поддерживается в IE8 и более ранних версиях этого браузера.
Больше примеров
Как одним выражением стилизовать сразу все верхние границы
Стилизуем нижнюю границу элементов
Устанавливаем ширину левой границы
Указываем цвет четырех границ
Указываем цвет только правой границы элемента
Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!
Пожалуйста, оставляйте ваши комментарии по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, лайки, отклики, дизлайки!
border
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById(" elementID ").style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .