CSS - Несколько типов границ в одной строке

Question

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

Можно ли вызвать несколько свойств границы в одной строке CSS?

Например:

border-top, border-right: xxx; 

Или даже:

border-top,right,left: xxx; 

мне было интересно об этом.

Благодаря

Answer 1

Это будет что-то вроде этого:

.border { 
 
    border-width: 1px 2px 3px 0; 
 
    border-style: solid dotted dashed none; 
 
    border-color: red blue green transparent; 
 

 
    display: block; 
 
    padding: 10px; 
 
    text-align: center; 
 
}

<div class="border">Mixed borders</div>

Answer 2

Конечно, так же, как margin, padding и т.д., вы можете дать 4 значения (сверху, справа, снизу, левый) или 2 значение (верх & низ, левый & правый)

div { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
#a { 
 
    border: 1px solid red; 
 
} 
 
#b { 
 
    border-color: green; 
 
    border-style: solid; 
 
    border-width: 5px 3px 9px 0; 
 
} 
 
#c { 
 
    border-color: tomato; 
 
    border-style: solid; 
 
    border-width: 15px 1px; 
 
}

<div id="a"></div> 
 
<br /> 
 
<div id="b"></div> 
 
<br /> 
 
<div id="c"></div>