Как закруглить углы в CSS
Вы, конечно же, знаете, что в HTML-ле нет возможности создавать закругленные углы. Но необходимость в них велика. Поэтому верстальщики выдумали не один способ, чтобы закруглить угол, и самый простой и популярный из них, когда в крайние ячейки таблицы сайта помещались картинки углов.
По некоторым наблюдениям почти в 80% дизайнерских работ используются плавные линии. Закругленный угол тоже считается плавной линией. Получается, что визуальная мягкость и красота закругленного угла более востребована, нежели жесткость прямого угла, которая нужна лишь в определенных случаях.
К слову говоря, специалисты по дизайну жилых помещений считают, что закругленные углы помогают визуально расширить пространство комнаты. Пожалуй, этот визуальный фокус вполне применим и к сайтам.
Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!
Для примера вот у нас есть такая кнопка:
Чтобы закруглить углы, пропишите в CSS « border-radius »:
.knopka Результат будет таким:
Как видите, закруглились четыре угла на 20 px .
Если нужно закруглить, к примеру, только один, два или три угла, тогда нужно прописать к каждому углу параметры:
border-radius: 20px 20px 0 0;
Начинаете с левого верхнего угла и по часовой.
Закруглилось два верхних угла.
Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел …
Чтобы избежать такого, добавьте border-radius под популярные браузеры:
-moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ -icab-border-radius: 10px; /* Icab */ border-radius: 10px; /* CSS3 */
А сейчас парочка примеров того, что можно сотворить, используя закругление углов.
Оформление кнопок
Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.
Ширина и высота кнопки
Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).
Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).
Пример 2. Использование padding
Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.
Параметры текста
К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.
Рамка
Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .
Пример 4. Цветные рамки у кнопки
Здесь используется набор кнопок с цветными рамками для различных ситуаций.
Скругление углов
За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .
Пример 5. Скруглённые уголки у кнопок
Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.
| Значение border-radius | Описание | Вид кнопки |
|---|---|---|
| 0.5em | Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки. | Кнопка |
| 5em | Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли. | Кнопка |
| 50% | Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка. | Кнопка |
| 0.8em 0 0.8em 0 | Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке. | Кнопка |
Фон
В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .
Пример 6. Использование background-color
Здесь используется набор цветных кнопок для различных ситуаций.
Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.
Пример 7. Сочетание фона и линии
Градиентный фон
Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:
Для горизонтального градиента слева направо добавится ещё один параметр to right:
Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.
linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.
Пример 8. Градиентные кнопки
Добавление тени
Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.
Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .
В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.
Итоги
- Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
- Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
- Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
- Тень к кнопке добавляется через свойство box-shadow.
border — radius
Свойство border — radius закругляет углы почти у любого элемента. И даже если у блока не задана явная рамка.
🔮 Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.
Пример
Скопировать ссылку «Пример» Скопировано
Самая простая штука — кнопка с закруглёнными краями:
button class="btn">Купитьbutton>
.btn border: none; border-radius: 5px;>.btn border: none; border-radius: 5px; >
Обрати внимание, что мы сбросили стандартную рамку кнопки, но углы тем не менее слегка закруглились.
Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет «нажиматься» — получится привлекательно и современно 😉
body background-color: #e6e6e6;> .btn:focus box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s;>body background-color: #e6e6e6; > .btn:focus box-shadow: inset 0 0 0 3px #e6e6e6; transition: all 0.2s; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство border — radius задаёт радиус закругления каждого из углов элемента.
Если значение задано в процентах, то оно будет высчитываться от размеров элемента: горизонтальные размеры будут высчитываться от ширины элемента, а вертикальные — соответственно, от высоты (поэтому для квадратного элемента можно задать border — radius : 50 % , чтобы сделать его круглым).
Как пишется
Скопировать ссылку «Как пишется» Скопировано
div /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%;>div /* радиус в пикселях */ border-radius: 5px; /* радиус в процентах */ border-radius: 50%; /* разные радиусы для каждого из четырёх углов элемента */ border-radius: 5px 0 0 50%; >
Можно управлять степенью закругления каждого из углов в отдельности или задать одно значение для всех углов сразу. Причём значение на самом деле состоит из двух — скругления по горизонтальной оси и по вертикальной. Чтобы явно задать скругление для каждой из осей (т. е. получить не круглое значение, а эллипсоидное), это значение следует записывать через символ / :
.ellipse border-radius: 5em / 50%;>.ellipse border-radius: 5em / 50%; >
Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:
.ellipse border-top-left-radius: 5em 50%; border-top-right-radius: 5em 50%; border-bottom-right-radius: 5em 50%; border-bottom-left-radius: 5em 50%;>.ellipse border-top-left-radius: 5em 50%; border-top-right-radius: 5em 50%; border-bottom-right-radius: 5em 50%; border-bottom-left-radius: 5em 50%; >
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 border — radius сработает даже если не будет задана видимая рамка.
💡 Чтобы увидеть результат работы свойства, надо задать фоновую заливку или картинку блоку, к которому применяется закругление углов. Или рамку, или фон для родительского элемента. Что-то, что отделит белое от белого 🤗
💡 Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:
- border — top — left — radius — радиус закругления для левого верхнего угла.
- border — top — right — radius — радиус закругления для правого верхнего угла.
- border — bottom — right — radius — радиус закругления для правого нижнего угла.
- border — bottom — left — radius — радиус закругления для левого нижнего угла.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, border — radius : 9999px . Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Самый крутой лайфхак — это круглые элементы при помощи border — radius . Они часто нужны для всяких лейблов на странице.
button class="icon" data-notifications="3">button> .icon background-image: url(eyes.png);> .icon::after content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242;>.icon background-image: url(eyes.png); > .icon::after content: attr(data-notifications); /* равные ширина */ width: 25px; /* и высота */ height: 25px; /* закругляем углы на 50% */ border-radius: 50%; color: #ffffff; background-color: #ed4242; >