css border dashed длина штриха

Свойство border позволяет определять стиль, ширину и цвет границ рамки CSS :

Содержание

Свойство border-style
Свойство border-width
Свойство border-color
Border: отдельная стилизация границ
Короткое свойство border
Все свойства границ в CSS
2 ответа 2
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css svg или задайте свой вопрос.
Связанные
Похожие

Свойство border-style

Свойство border-style определяет тип отображения границы.

Это свойство принимает следующие значения:

dotted – граница в точечку;
dashed – штриховая граница;
solid – сплошная граница;
double – двойная граница;
groove – трехмерная CSS рамка вокруг текста. Эффект зависит от значения border-color ;
ridge – трехмерная выпуклая рамка. Эффект зависит от значения border-color ;
inset – трехмерная утопленная рамка. Эффект зависит от значения border-color ;
outset – трехмерная внешняя граница. Эффект зависит от значения border-color ;
none – отключение границы;
hidden – скрытая граница.

Свойство border-style может принимать от одного до четырех значений ( для верхней, правой, нижней и левой границ ).

Примечание: ни одно из представленных далее CSS-свойств для оформления границ не будет работать до тех пор, пока border-style не установлено.

Свойство border-width

Свойство border-width определяет ширину четырех границ. Можно указывать ее конкретный размер (в px , pt , cm , em , и т. д .) либо использовать одно из трех предустановленных значений: thin , medium или thick .

Свойство border-width может иметь от одного до четырех значений ( для верхней, правой, нижней и левой рамки CSS ).

Свойство border-color

Свойство border-color используется для указания цвета четырех границ.

Цвет можно установить с помощью:

Названия: red, blue ;
Hex-значения: #ff0000 ;
RGB-значения: rgb(255,0,0) ;
Сделать прозрачным: значение transparent .

Свойство border-color может иметь от одного до четырех значений ( для верхней, правой, нижней и левой границ ).

Если значение border-color не установлено, то наследуется цвет элемента.

Border: отдельная стилизация границ

Из приведенных выше примеров видно, что можно устанавливать разную стилизацию для каждой стороны блока. В CSS-коде также имеются свойства для стилизации отдельных границ ( top , right , bottom и left ):

Приведенный выше пример даст тот же результат, что и:

Если у свойства 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-style . Однако тот же принцип работы и у border-width , и у border-color .

Короткое свойство border

Чтобы сократить объем кода, значение для каждой отдельной границы можно указывать одним свойством:

border-width ;
border-style ( обязательное свойство );
border-color .

Также можно выставлять свойства какой-то конкретной границы с одной из сторон:

Свойство border-radius используется для создания закругленных углов у CSS рамки вокруг текста или другого элемента.

Пример

Примечание: свойство border-radius не поддерживается в IE 8 и более ранних версиях.

Все свойства границ в CSS

Свойство	Описание
Border	Позволяет выставить все свойства границ одним объявлением.
border-bottom	Позволяет выставить все свойства нижней границы одним объявлением.
border-bottom-color	Установка цвета нижней границы.
border-bottom-style	Установка стилизации нижней границы.
border-bottom-width	Установка толщины нижней границы.
border-color	Установка цвета четырех границ
border-left	Позволяет выставить все свойства левой границы одним объявлением.
border-left-color	Установка цвета левой рамки вокруг картинки CSS .
border-left-style	Установка стиля левой границы.
border-left-width	Установка толщины левой границы.
border-right	Позволяет выставить все свойства правой границы одним объявлением.
border-right-color	Установка цвета правой границы.
border-right-style	Установка стиля правой границы.
border-right-width	Установка толщины правой границы.
border-style	Установка стиля четырех границ.
border-top	Позволяет выставить все свойства верхней границы одним объявлением.
border-top-color	Установка цвета верхней границы.
border-top-style	Установка стиля верхней границы.
border-top-width	Установка толщины верхней границы.
border-width	Установка толщины четырех рамок CSS .

Данная публикация представляет собой перевод статьи « CSS Border Properties » , подготовленной дружной командой проекта Интернет-технологии.ру

Нужно сделать блок с такой обводкой

Но если использовать border: 2px dashed #15acd3 , то получается так:

Возможно ли через CSS задавать как длину штриха и отступы между штриками?

2 ответа 2

background-image с SVG. Регулировать расстояния между черточкам нужно в свойстве stroke-dasharray .

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

Не забудьте про вендорные префиксы для свойства border-imagе, если нужна повышенная кросбраузерность.