Установить цвет рамки CSS в цвет текста

Есть ли способ установить border-color в CSS так же, как цвет текста?

Например, имея класс, который добавляет нижнюю пунктирную границу, но оставляя цвет указанной границы соответствующим цвету текста во многом таким же, как цвет text-decoration:underline - это цвет текста (color свойство)?

Ответ 1

Вы действительно получаете это поведение бесплатно; он упоминается в spec:

Если цвет границы элемента не задан с помощью свойства border, пользовательские агенты должны использовать значение свойства "цвет" элемента как вычисленное значение для цвета рамки.

Итак, все, что вам нужно сделать, это опустить цвет при использовании стенографического свойства border:

.dotted-underline {
    border-bottom: dotted 1px;
}

Или используйте только свойства border-style и border-width, а не border-color:

.dotted-underline {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

Или, в браузерах, которые поддерживают новое ключевое слово CSS3 currentColor, укажите это как значение для border-color (полезно для переопределения существующих border-color):

.dotted-underline {
    border-bottom-color: currentColor;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

Цвет, который занимает граница будет таким же, как цвет текста по умолчанию.

Ответ 2

Это:

border-bottom: 1px dotted currentColor;

Из спецификации:

currentColor Значение свойства цвета. Вычисленное значение ключевого слова currentColor является вычисленным значением свойства color. Если ключевое слово currentColor задано в свойстве color, он рассматривается как "color: inherit.

Смотрите здесь: http://www.w3.org/TR/css3-color/#currentcolor

(не работает в IE8)

Обновление: Итак, кажется, что явное указание значения цвета не требуется, поскольку значение по умолчанию уже является значением свойства color.

Итак, это работает отлично:

border-bottom: 1px solid;

Ответ 3

Вам придется установить их одинаковым цветом.

Если вы хотите, чтобы ваш CSS был более программным и сухим, вы должны использовать что-то вроде LESS. Это может сэкономить вам много работы, поэтому вам нужно только объявить этот цвет один раз.