Как сделать прямоугольник с закругленными краями в css?
2 ответа
от
patrick.little ,
2 года назад
@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 ,
10 месяцев назад
@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.
15