Объединение границ сверху, границы справа, слева и границы снизу в CSS

Question

Есть ли способ комбинировать границы сверху, справа и слева, границы снизу в CSS, например, в стиле супер-сокращения.

например:

border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);

Answer 1

Нет, вы не можете установить их все в одном выражении.
В общем случае вам нужно как минимум три свойства:

border-color: red green white blue;
border-style: solid dashed dotted solid;
border-width: 1px 2px 3px 4px;

Однако это было бы довольно грязно. Это было бы более читабельным и обслуживаемым с четырьмя:

border-top:    1px solid  #ff0;
border-right:  2px dashed #f0F;
border-bottom: 3px dotted #f00;
border-left:   5px solid  #09f;

Answer 2

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

border: 1px dashed red; border-width: 1px 1px 0 1px;

это немного короче, и, возможно, легче читать, чем

border-top: 1px dashed red;  border-right: 1px dashed red; border-left: 1px dashed red;

или

border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;

Answer 3

Нет, вы не можете установить их как один например, если у вас есть DIV { граница сверху: 2px сплошной красный; граница справа: 2px сплошной красный; нижний край: 2px сплошной красный; рамка слева: 2px сплошной красный; } одинаковые свойства для всех четверок, затем вы можете установить их в одну строку

div{border:2px solid red;}

Answer 4

Или, если все границы имеют одинаковый стиль, просто:

border:10px;