Нам показалось интересным рассмотреть различные способы задания рамки с трех сторон элемента. Среди этих способов нет особо сложных, но, надеемся, Вам будет проще выбрать для себя один или несколько способов, например, за простоту синтаксиса, эффективность, способ записи или что-то другое. 

Предположим, что нужно задать рамку снизу, слева и справа, но не сверху элемента.

Задание каждой из сторон

.three-sides {
  border-bottom: 2px solid black;
  border-right:  2px solid black;
  border-left:   2px solid black;
}

Эта запись предельно понятна, но в ней все еще используются сокращения. Полностью развернутая запись выглядела бы следующим образом:

.three-sides {
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;

  border-left-color: black;
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: black;
  border-right-style: solid;
  border-right-width: 2px;
}

Удаление одной из сторон

Можно сократить код CSS, задав рамку всем четырем сторонам с помощью сокращенной записи, и после этого удалить рамку с той стороны, с которой она не нужна:

.three-sides {
  border: 2px solid black;
  border-top: 0;
}

Использование нулевой ширины

.three-sides {
  border-color: black;
  border-style: solid;
  /* Порядок записи сторон такой же, как и для внешнего и внутреннего отступа: верхняя, правая, нижняя, левая, т. е., по часовой стрелке начиная с верха */
  border-width: 0 2px 2px 2px;
}

Что интересно, не обязательно задавать цвет рамки, чтобы она была видна, цвет будет унаследован или, если у родительских элементов он не задан, будет применен цвет рамки, используемый таблицей стилей браузера по умолчанию. Так что следующая запись также возможна:

.three-sides {
  /* цвет не задан */
  border-style: solid;
  border-width: 0 2px 2px 2px;
}

Конечно, можно использовать и другие цвета и способы записи цвета для рамки:

.three-sides {
  border-color: #F00;
  border-style: solid;
  border-width: 0 2px 2px 2px;
}

Если нужно задать цвет для рамки, также можно использовать такую частично сокращенную запись:

.three-sides {
  border: solid rgba(0,200,0,0.5);
  border-width: 2px 0 2px 2px;
}

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание стилей для полос прокрутки
• Интересное оформление для элемента цитаты с использованием CSS
• Собственные названия для упрощения записи свойств для сеток CSS