Рамки

Рассмотрим рамки подробнее. Одну мы уже писали: border: 1px solid red. У свойства border три значения:

border: толщина стиль цвет;

• Толщина, обычно в пикселях, например 2px.
• Стиль линии: solid, dashed, dotted или double. Значение none означает отсутствие рамки.
• Цвет в любом знакомом вам формате, например #476958.

Вот как выглядят эти стили: solid dashed dotted double

Порядок значений не важен, поэтому border: solid 2px #476958 тоже работает. Толщину или цвет можно даже опустить, и браузер возьмёт значение по умолчанию. Но не забывайте про стиль: его значение по умолчанию — none, так что border: 2px red не покажет никакой рамки.

Чтобы нарисовать рамку только с одной стороны, есть свойства border-top, border-right, border-bottom и border-left, которые принимают те же три значения. Например, border-bottom: 1px solid gray рисует линию под элементом.

Красные рамки помогли нам увидеть блоки. Теперь заменим их более красивыми: две группы текста и список пород станут карточками с белым фоном и зелёной рамкой.