Есть ли сокращение для установки другого цвета / стиля / ширины для каждой стороны границы CSS?

Question

Я хочу установить другой цвет / стиль / ширину для каждой стороны границы CSS.

Есть ли для этого сокращение?

Answer 1

Вы должны объявить каждую отдельную границу:

.my-box {
  border-top: 1px solid red;
  border-left: 3px dashed black;
  border-right: 2px dotted violet;
  border-bottom: 1px solid #cccccc;
}

Если вы хотите, вы можете переопределить только границы с другим стилем:

.my-box {
  border: 1px solid red;
  border-right: 2px dotted violet;
}

Answer 2

Самое близкое, что вы можете получить, это:

selector
{
    border-width: 1px 2px 3px 4px;
    border-style: solid;
    border-color: #f00 #0f0 #00f #f0f
}

Хотя, если у вас в основном одинаковая граница с одной стороной, например, я бы пошел с ответом daveoncode.

Answer 3

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

border: 1px solid Red, 2px solid Green, 2px solid darkgeen, 1px solid Pink;

, но это не так.Для примера выше вам нужно сделать что-то вроде:

border: 1px solid Red;
border-right: 2px solid Green;
border-bottom: 2px solid darkgreen;
border-left-color: Pink;