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

Круглые углы в CSS можно создать при помощи свойства border-radius.

HTML:

<div class="block">
  <p>Текст внутри блока с круглыми углами</p>
</div>

CSS:

.block {
  border-radius: 15px; /* задаем радиус скругления */
  background-color: #f2f2f2;
  padding: 20px;
}

В данном примере мы создали блок div с классом block, задали ему свойство border-radius, которое определяет радиус скругления углов. Также мы задали цвет фона с помощью свойства background-color и отступы внутри блока с помощью свойства padding.

Можно задать разный радиус скругления для каждого угла:

CSS:

.block {
  border-top-left-radius: 25px;
  border-bottom-right-radius: 20px;
  background-color: #f2f2f2;
  padding: 20px;
}

Такой код создаст блок с круглыми углами, где верхний левый угол будет иметь радиус скругления 25px, а нижний правый – 20px.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать круглые углы в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали