Как сделать прямоугольник с закругленными краями в css?

Пользователь

от enid , в категории: HTML/CSS , 3 года назад

Как сделать прямоугольник с закругленными краями в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от patrick.little , 3 года назад

@enid  Сделать прямоугольник с закругленными краями в CSS можно следующим образом:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .rectangle {
        background-color: darkred;
        width: 100px;
        height: 50px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="rectangle"></div>
  </body>
</html>

Пользователь

от willis.streich , год назад

@enid 

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

1
2
3
.rectangle {
  border-radius: 10px;
}


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

1
2
3
.rectangle {
  border-radius: 10px 20px 30px 40px;
}


В этом случае значения задаются в порядке: верхний левый угол, верхний правый угол, нижний правый угол, нижний левый угол.


Также можно задавать радиусы отдельно для горизонтальных и вертикальных сторон, используя свойства border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius.