border-style

CSS свойство border-style

CSS свойство border-style устанавливает все границы элемента. Это сокращенное свойство для установления border-top-style, border-bottom-style, border-left-style, border-right-style.

Свойство может иметь от одного до четырёх значений. Каждая сторона может иметь своё значение.

Значение по умолчанию для border-style — none. Границы расположены с верхней стороны фоновой части элемента.

Некоторые браузеры могут не поддерживать какой-то стиль. Обычно, если стиль не поддерживается, браузер отображает границы как solid.

Свойство border-style может быть установлено используя одно, две, три или четыре значения. Если установлено одно значение, оно применяется для всех сторон. Если установлены две значения, первое из них применяется для верхней и нижней стороны, а второе для левой и правой стороны. Если установлены три значения, первое применяется для верхней стороны, второе для левой и правой, а третье для нижней стороны. Если установлены четыре значения, стили поочередно применяются для верхней, правой, нижней и левой стороны.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к ::first-letter.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.borderStyle = «dotted double»;

Синтаксис

border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;

Пример

html> html> head> title>Заголовок документа title> style> p < border-style: dotted; padding: 5px; > style> head> body> p>Пример dotted border-style. p> body> html>

В данном примере все стороны имеют одинаковое значение. Рассмотрим пример, где каждая сторона имеет своё значение:

Пример

html> html> head> title>Заголовок документа title> style> p < border-width: 4px; border-style: double solid dashed dotted; border-color: #1c87c9; color: #8ebf42; padding: 5px; > style> head> body> p> Пример, где каждая сторона имеет своё значение. p> body> html>

Пример, где использованы все четыре значения:

Пример

html> html> head> title>Заголовок документа title> style> body < background: #eee; font-size: 20px; text-align: center; > main div < display: flex; align-items: center; justify-content: center; color: black; padding-top: 30px; padding-bottom: 30px; width: 200px; height: 100px; margin: 15px; font-weight: bold; background-color: #c9c5c5; border: 8px solid #1c87c9; > .flex-center < display: flex; justify-content: center; > /* border-style example classes */ .b1 < border-style: hidden; > .b2 < border-style: dotted;> .b3 < border-style: dashed;> .b4 < border-style: solid;> .b5 < border-style: double;> .b6 border-style: groove;> .b7 border-style: ridge;> .b8 border-style: inset;> .b9 border-style: outset;> style> head> body> h2>Примеры значения border-style h2> main class="flex-center"> div class="b1"> hidden div> div class="b2"> dotted div> div class="b3"> dashed div> main> main class="flex-center"> div class="b4"> solid div> div class="b5"> double div> div class="b6"> groove div> main> main class="flex-center"> div class="b7"> ridge div> div class="b8"> inset div> div class="b9"> outset div> main> body> html>

Значения

Значение	Описание
none	Указывает на отсутствие границы. Значение по умолчанию.
hidden	Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы.
dotted	Точечная граница.
dashed	Пунктирная граница.
double	Двойная граница.
solid	Сплошная граница.
groove	Отображает границы с 3D groove эффектом и создает впечатление, что граница вырезана. Противоположный эффекту ridge.
ridge	Отображает границы с 3D ridge эффектом и создает впечатление, что граница выдвинута. Противоположный эффекту groove.
inset	3D эффект, создающий впечатление вложенного элемента. Противоположный эффекту outset.
outset	3D эффект, создающий впечатление выпуклого элемента. Противоположный эффекту inset.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

Поддержка браузера

Источник

CSS center a border with CSS

The following tutorial shows you how to use CSS to do «CSS center a border with CSS».

CSS Style

The CSS style to do «CSS center a border with CSS» is

.divider < background:aqua url("styles/images/divider-stars.png") no-repeat center 0; height:30px; padding-bottom:10px; width:100%; margin:20px auto; float:left; > .divider:after < content:''; display:block; margin-top:19px; border-bottom:2px dotted #b38b0d; >

HTML Body

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .divider !-- w ww . d e m o 2 s .c om --> background: aqua url("styles/images/divider-stars.png") no-repeat center 0; height:30px; padding-bottom: 10px; width: 100%; margin: 20px auto; float: left; > .divider:after < content: ''; display: block; margin-top:19px; border-bottom: 2px dotted #b38b0d; >  body> div >"divider">    

Related

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

border-style

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit

Значения

Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Кроме перечисленных в таблице значений используются следующие ключевые слова.

none Не отображает границу и ее толщина ( border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

Табл. 2. Зависимость результата использования от числа значений

Число значений	Результат
1	Стиль границы будет задан для всех сторон элемента.
2	Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3	Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства border-style

Объектная модель

[window.]document.getElementById(» elementID «).style.borderStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Источник

Все о свойстве border

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Основы

border-width: thick; border-style: solid; border-color: black;

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

border: 20px groove #e3e3e3;

border-color: #e3e3e3; border-width: 20px; border-style: groove;

Outline

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

Псевдоэлементы

.box < width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; >/* Create two boxes with the same width of the container */ .box:after, .box:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >.box:after < border: 5px solid red; outline: 5px solid yellow; >.box:before

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Изменение углов

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

.speech-bubble < /* … other styles */ border-radius: 10px; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ >

Примеры применения:

/* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION 
Hi there
 */ .speech-bubble < position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; >.speech-bubble:after < content: ''; position: absolute; width: 0; height: 0; border: 15px solid; >/* Position the Arrow */ .speech-bubble-top:after < border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; >.speech-bubble-right:after < border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; >.speech-bubble-bottom:after < border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; >.speech-bubble-left:after

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

.speech-bubble < /* other styles */ display: table; >.speech-bubble p

Еще один пример нестандартного использования границ:

Итог

Использование параметра border не ограничивается одним лишь «1px solid black», с помощью границ можно создавать различные фигуры, причем достаточно один раз написать CSS-класс и применять его к множеству элементов на странице.

Источник