Как закруглить кнопку в CSS?

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

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

Как закруглить кнопку в CSS?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от rupert.collins , 2 года назад

Для закругления краев на кнопке, можно использовать border-radius


HTML:

1
2
3
<body>
    <button class="border">Войти</button>
</body>


CSS:

1
2
3
4
5
6
.border {
    width: 100px;
    height: 50px;
    background-color: blueviolet;
    border-radius: 15px;
}

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

от jerad.kuphal , год назад

@fredy 

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

1
2
3
button {
    border-radius: 50px;
}


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

1
2
3
4
button {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}