Недавно необходимо было сделать внутреннюю границу для div’a. Решил использовать стандартное значение inset для свойства border, однако оно не сработало. Тогда начал искать другое решение.

Найденное решение оказалось очень простым и сложным. Сложность его в том, чтобы к нему прийти, а легкость… Легкость в его реализации. Это к слову о том, что HTML и CSS можно выучить за неделю, но уметь с ним работать, на это надо годы практики.

Теперь о самом решении. Поскольку конструкция
.border-inset {
border: 1px red solid inset;
}

Не сработала, я нашел простое решение. Для того, чтобы сделать внутреннюю границу мы будем использовать другой подход, а именно: использовать box-shadow.

Следующий код сделает нам внутреннюю черную границу у элемента:

.border-inset {
box-shadow: 1px 1px 0 #000 inset, -1px -1px 0 #000 inset;
}

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

Само по себе свойство box-shadow позволяет нам использовать несколько наборов параметров через запятую, что мы и сделали.

Если говорить простым языком, мы сначала сместили тень на 1px по горизонтали и на 1px по вертикали, установили степень размытия 0, задали цвет #000 (черный) и указали, что тень будет внутри нашего элемента (inset). Степень размытия у нас 0, поэтому тень будет в 1px (без размытия). Таким образом мы указали левую и верхнюю границы. Затем мы добавили еще один набор значений (с отрицательными значениями), чтобы добавить правую и нижнюю границы.

Вот и все, таким простым способом мы сделали внутреннюю границу у элемента. Применять можно как к простому div’у, так и любому другому элементу, включая изображения. Вот, кстати, еще один из способов применения тени. Здесь я верстал обычную ссылку <a>, но не совсем стандартного вида.