Как сделать рамку в css

Для формирования видимых границ у элементов в CSS используется свойство border. Рассмотрим пример:

Исходный HTML документ:

<!-- Нарисуем два квадрата и круг с разными границами -->
<div class="block1"></div>
<div class="block2"></div>
<div class="circle"></div>

Стили элементов:

div{
  /* Расположим элементы друг над другом, зададим размер квадратов */
  position: absolute;
  width: 200px;
  height: 200px;
}

.block1 {
  /* зеленая граница, сплошная линия */
  border: 5px solid rgb(123, 192, 59);
  /* смещаем квадрат от верхней и левой границы на 20px */
  top: 20px;
  left: 20px;
}

.block2 {
  /* Граница из "тире" розового цвета */
  border: 5px dashed #cc295a;
  top: 55px;
  left: 55px;
}

.circle {
  /* Создаем круг */
  border-radius: 50%;
  /* Граница синяя, двойная */
  border: 5px double #32a1ce;
  /* Сделаем круг немного меньше чем квадраты */
  width: 100px;
  height: 100px;
  top: 85px;
  left: 85px;
}

Результат: