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

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

Свойство 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е, если нужна повышенная кросбраузерность.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css svg или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Вот, собственно вопрос:

Есть ли возможность сделать первый dash не рваным и чем вообще это определяется?

Оцените статью