Как закруглить рамки в CSS

Для закругления рамок в CSS можно использовать свойство border-radius. Синтаксис для задания этого свойства выглядит следующим образом:

border-radius: <значение>;

Значение может быть задано в пикселях (px), процентах (%) или других единицах измерения.

Например, если вы хотите закруглить все углы рамки на 10 пикселей, то можете добавить такой CSS код:

div {
  border: 2px solid red;
  border-radius: 10px;
}

Если вы хотите закруглить только верхние углы рамки по горизонтали и верхним углам рамки по вертикали, то можете задать значение свойства border-radius следующим образом:

div {
  border: 2px solid red;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

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

div {
  border: 2px solid red;
  border-radius: 50%;
}

Этот код закруглит все углы рамки так, чтобы они создали круг.