Как сделать короткие границы по углам в CSS

Разберемся как сделать с помощью CSS короткие границы по углам блока, секции или какой-то области.

Нам нужно получить что-то вроде этого:

****                         ****
*                               *
*                               *

             КОНТЕНТ

*                               *
*                               *
****                         ****

Сделать это довольно не сложно, используя для блока div свойства фона.

Допустим, что у нас есть:

<div></div>

Чтобы у нас были по углам границы — мы используем следующие свойства CSS для этого блока:

div {
  width: 100px;
  height: 100px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}

Тогда получим следующее:

Такое не хитрое, но интересное решение.

Сергей Ермилов