Как округлить края в CSS

Чтобы округлить края для элемента (например, для прямоугольной области в div), используйте свойство border-radius. Значение этого свойства задает радиус скругления углов элемента.

Например, чтобы создать элемент с радиусом скругления 10 пикселей, используйте следующий CSS-код:

div {
  border-radius: 10px;
}

Вы также можете задать радиус скругления для каждого угла отдельно, используя ключевые слова border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius. Например:

div {
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 20px;
}

Обратите внимание, что border-radius может принимать одно, два, три или четыре значения. Если задано одно значение, то это радиус скругления для всех четырех углов. Если заданы два значения, то первое значение задает радиус для верхних углов, а второе значение — для нижних углов. Если заданы три значения, то первое значение задает радиус для верхнего левого угла, второе значение — для верхнего правого и нижнего левого углов, а третье значение — для нижнего правого угла. Если заданы все четыре значения, то они задают радиусы для верхнего левого, верхнего правого, нижнего левого и нижнего правого углов соответственно.