④ Задание рамки одним свойством и для одной границы элемента

Продолжим изучение темы CSS - рамка. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Стиль рамки border-style
• ② Цвет рамки border-color
• ③ Ширина рамки border-width

Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

CSS

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;
}

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

Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

CSS

p {border-top: 2px solid grey;}

Источник ↗