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

См. также

• border-radius
• Атрибуты
• Кнопки
• Кнопки
• Кнопки в Bootstrap 4
• Кнопки в Bootstrap 5
• Круглые изображения
• Оформление кнопок
• Создание кнопок

CSS3 — скругление углов и фон

С самых ранних дней спецификации CSS веб-дизайнеры пользовались стилями для форматирования рамок с содержимым. По мере того как CSS набиралась сил, предоставляемые ею возможности для оформления рамок становились все более впечатляющими, позволяя создавать разнообразные эффекты от затененных колонтитулов до плавающих рисунков с подписями.

А решение в CSS задачи реагирования элементов на наведение курсора превратило плавающие панели в вычурные кнопки и другие элементы с подсветкой, позволив избавиться от неуклюжих прошлых решений на JavaScript. Поэтому неудивительно, что некоторые наиболее популярные и лучше всего поддерживаемые возможности CSS3 могут сделать ваши рамки сногсшибательными независимо от их содержимого.

Скругление углов

Свойство border-radius позволяет скруглять углы рамок. Это свойство можно настроить таким образом, чтобы придавать углам рамок любую кривую форму.

Прежде всего, этому свойству можно присвоить другое, единое значение радиуса границы. Радиус границы — это радиус обрамляющего круга. Конечно же, весь круг не рисуется, а только та его часть, необходимая для соединения вертикальной и горизонтальной границ рамки. Если установить большее значение border-radius, получится больший круг и более плавно скругленный угол. Как и в случае с большинством других измерений в CSS, радиус можно задавать в разных единицах, включая пикселы и проценты. Кроме этого, для каждого угла можно указать отдельное значение border-radius:

aside

Но это еще не все — также можно растянуть круг в эллипс, создавая кривую, более протяженную в одном из направлений. Для этого нужно обрабатывать каждый угол отдельно специальными свойствами (например, свойство border-top-left-radius обрабатывает левый верхний угол), которым присваиваются два значения: одно для горизонтального радиуса эллипса, а другое — для вертикального:

aside

Фон

Одним из быстрых способов создания привлекательных фонов и обрамлений будет использование изображения. Спецификация CSS3 определяет две новые возможности, которые можно использовать для этой цели. Первая возможность — это поддержка нескольких фонов, которая позволяет объединить два (или больше) изображения в один фон. Далее приведен пример кода для создания одного фона из двух изображений, чтобы украсить левый верхний и правый нижний углы рамки:

aside

Первым шагом в реализации этой задачи надо предоставить список любого количества изображений в свойстве background-image. Полученные изображения можно потом расположить в соответствующих местах посредством свойства background-position и указать, повторять ли их, с помощью свойства background-repeat. При этом нужно следить за правильностью порядка, чтобы расположить первое изображение в позиции, указанной в первом значении свойства background-position, второе — во второй и т.д. Результаты применения правила показаны на рисунке:

Браузеры, не поддерживающие составные фоны, полностью игнорируют попытку установить фон этого типа. Во избежание этой проблемы сначала установите резервный фон, присвоив цвет или изображение свойству background или background-image. Только потом предпринимайте попытку установить составной фон, присвоив свойству background-image список изображений.

Border-radius: закругленные углы в CSS

В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

.borderElement

Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; >.borderElement1

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; >

Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:

• border-top-left-radius — для верхнего левого угла;
• border-top-right-radius — для верхнего правого угла;
• border-bottom-left-radius — для нижнего левого угла;
• border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px :

Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Закругленные кнопки

Здесь вы узнаете, как сделать кнопки с закругленными углами при помощи CSS.

2px 4px 8px 12px 50%

Как сделать закругленные кнопки

Шаг 1) Добавляем HTML: