Как создать рамку в CSS

Чтобы создать рамку в CSS, можно использовать свойство border. Свойство border позволяет задать ширину, стиль и цвет границ.

Например, чтобы создать рамку вокруг элемента <div> со следующими параметрами: ширина рамки – 2px, стиль – сплошная (solid), цвет рамки – красный (#FF0000), нужно использовать следующий CSS-код:

div {
  border: 2px solid #FF0000;
}

Если необходимо задать только верхнюю, нижнюю, левую или правую границу, можно использовать отдельные свойства border-top, border-bottom, border-left и border-right. Например, чтобы задать только верхнюю границу элемента <p> со свойствами: ширина границы – 1px, стиль – пунктирная (dashed), цвет границы – зеленый (#008000), следующий CSS код:

p {
  border-top: 1px dashed #008000;
}

Также можно использовать свойства border-width, border-style и border-color для отдельного задания каждого параметра границы. Например, чтобы задать рамку с разными параметрами для каждой границы для элемента <div>, можно написать код:

div {
  border-top-width: 2px;
  border-top-style: dashed;
  border-top-color: #008000;
  
  border-right-width: 3px;
  border-right-style: dotted;
  border-right-color: #0000FF;
  
  border-bottom-width: 4px;
  border-bottom-style: double;
  border-bottom-color: #FF00FF;
  
  border-left-width: 5px;
  border-left-style: groove;
  border-left-color: #808080;
}

Здесь мы задали текущий элемент <div> сами border-top, border-right, border-bottom и border-left.