Круглые кнопки на css3. Как создать стильные кнопки на чистом CSS

• Перевод
• Tutorial

Урок по реализации круглой кнопки загрузки (далее progress button) by Colin Garven. Будем использовать, описанную by Jake Archibald, технику анимации SVG линий для того, чтобы анимировать progress button и показать пользователю состояния «success and fail».

Сегодня мы покажем вам как создать изящную progress button. Это уникальный концепт submit button, предложенный by Colin Garven. Сперва взгляните на это (Demo), постарайтесь придумать, как реализовать, и просто наслаждайтесь анимацией. Идея состоит в следующем: при первом клике submit button трансформируется в круг, который покажет анимацию загрузки, используя свои границы (далее бордер). Когда анимация закончится, кнопка вернет исходную форму и покажет отметку, указывающую, что подтверждение прошло успешно или нет.

Существует несколько способов реализовать кнопку с таким эффектом. Думая о реализации только посредствам CSS, самой тяжёлой частью кажется круг прогресса. Существует техника реализации с помощью свойства clip. Anders Ingemann написал отличный полный tutorial (на LESS). Но мы будем использовать технику, основанную на SVG, CSS transitions и немного JS. Что касается круга прогресса, отметок success /fail, мы воспользуемся техникой рисования SVG линий, описанную by Jake Archibald.

Стоит отметить, что анимирование SVG может быть проблематичным для некоторых браузеров. Так что воспринимайте этот tutorial только как экспериментальное упражнение.

Поехали!

The Master plan

Если вы внимательно изучили Colin’s Dribbble shot, то должны были заметить, что нам следует позаботиться о нескольких состояниях кнопки. Интересная часть – переход между двумя такими состояниями. Сперва мы должны показать простую кнопку с прозрачным фоном и цветным бордером. При наведении мышки кнопка заполняется цветом бордера, а текст становится белым.

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

Когда подтверждение завершено, а круг полностью нарисован, кнопка должна снова расшириться, нарисовать галочку в случае успешного подтверждения. И закрашиваем кнопку соответственно.

В случае неудачи подтверждения, нужно показать состояние ошибки.

Давайте создадим нашу разметку со всеми необходимыми элементами.

Разметка

Для разметки нам потребуется главный контейнер, кнопка со спаном(span), содержащим текст, и три SVG:

Используем Method Draw , ведь проще всего воспользоваться онлайн SVG генератором, чтобы нарисовать галочку и крестик для кнопки. Размеры всех SVG будут 70х70, так как высота нашей кнопки 70рх. Если мы хотим круг с бордером толщиной в 5 единиц нам нужно установить правильный радиус, когда будим рисовать его в графическом редакторе, да так чтобы весь круг с его бордером имел высоту 70рх. Заметьте, что в SVG обводка рисуется симметрично границе объекта. К примеру, обводка толщиной в 2рх увеличит круг радиусом в 10рх к реальным толщине и высоте 20+2 вместо 20+4(ширина бордера дважды), то есть формула 2*r+border. Для нашего случая мы знаем 2*r+5=70, от сюда наш круг должен иметь радиус в 32,5рх. Таким образом выходит: />.

К сожалению, мы не можем использовать только эти базовые размеры, потому что дефолтные параметры вставки у каждого браузера свои и мы не можем контролировать, где «анимация загрузки начнётся». Таким образом, нам придётся конвертировать эту форму в path и использовать его. Вы можете легко осуществить это в Method Draw under Object > Convert to Path.

Для крестика мы будем использовать четыре элемента, которые можно нарисовать со средней точки, и анимировать так же как галочку.

Итак, у нас есть все необходимые элементы. Продумаем порядок действий и начнем стилизацию.

CSS

Сперва необходимо стилизовать контейнер для кнопки:

Progress-button { position: relative; display: inline-block; text-align: center; }
Укажем нашей кнопке цвета и шрифты. Что бы она соответствовала концепту, установим правильный бордер и шрифт Montserrat:

Progress-button button { display: block; margin: 0 auto; padding: 0; width: 250px; height: 70px; border: 2px solid #1ECD97; border-radius: 40px; background: transparent; color: #1ECD97; letter-spacing: 1px; font-size: 18px; font-family: "Montserrat", sans-serif; -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s; }
Также ставим transition для всех свойств, которые будут анимироваться (background-color, width etc.).

При наведении курсора мыши меняем цвет фона и цвет текста:

Progress-button button:hover { background-color: #1ECD97; color: #fff; }
Уберем все обводки (outline):

Progress-button button:focus { outline: none; }
Все SVG должны быть находиться по центру, все pointer-events отключены:

Progress-button svg { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; }
Формы не должны иметь цвета заливки, так как мы хотим играть только с обводкой. Мы не показываем элементы ни в каких состояниях кнопки, кроме нужного, так что давайте спрячем их, сделав прозрачными:

Progress-button svg path { opacity: 0; fill: none; }
Наш загрузочный круг будет создан установкой stroke-width в 5 единиц:

Progress-button svg.progress-circle path { stroke: #1ECD97; stroke-width: 5; }
Success/fail индикаторы будут иметь обводку тоньше, и она должна быть белой. Свойству stroke-linecap установим значение round, так они будут красивее. У них установим быстрое изменение прозрачности:

Progress-button svg.checkmark path, .progress-button svg.cross path { stroke: #fff; stroke-linecap: round; stroke-width: 4; -webkit-transition: opacity 0.1s; transition: opacity 0.1s; }
Теперь давайте подрезюмируем и вспомним наш master plan. Нам необходимо было иметь возможность стилизовать три добавленных состояния (помимо дефолтного) кнопки и специальных элементов. Будем использовать классы “loading”, “success” и “error” для их индикации.

Кнопка станет круглой и будет выглядеть в точности как загрузочный круг SVG, когда мы начнем процесс загрузки:
.loading.progress-button button { width: 70px; /* make a circle */ border-width: 5px; border-color: #ddd; background-color: transparent; color: #fff; }
Помним, что мы уже установили transition, когда задавали стили для кнопки. Текст должен быстро исчезнуть, когда начнется анимация загрузки,…

Loading.progress-button span { -webkit-transition: opacity 0.15s; transition: opacity 0.15s; }
… путем установки нулевого значения для прозрачности:

Loading.progress-button span, .success.progress-button span, .error.progress-button span { opacity: 0; /* keep it hidden in all states */ }
При смене состояний с loading на success/error нам не нужен transition, просто оставим текст скрытым.

Когда мы убираем все классы и возвращаем кнопку к исходному состоянию. Тексту нужно немного больше времени для появления, так что установим другие значения длительности анимации и ее задержки для нормального состояния:

/* Transition for when returning to default state */ .progress-button button span { -webkit-transition: opacity 0.3s 0.1s; transition: opacity 0.3s 0.1s; }
При достижении последнего состояния необходимо переопределить transition, так как нам не надо анимировать цвет бордера или широту кнопки:

Success.progress-button button, .error.progress-button button { -webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s; transition: background-color 0.3s, width 0.3s, border-width 0.3s; }
Зададим цвета для последнего состояния:

Success.progress-button button { border-color: #1ECD97; background-color: #1ECD97; } .error.progress-button button { border-color: #FB797E; background-color: #FB797E; }
Когда будет применен необходимый класс, нужно показать нашу SVG и анимировать stroke-dashoffset установкой следующео значения для transition:

Loading.progress-button svg.progress-circle path, .success.progress-button svg.checkmark path, .error.progress-button svg.cross path { opacity: 1; -webkit-transition: stroke-dashoffset 0.3s; transition: stroke-dashoffset 0.3s; }
Добавим easing для анимации широты кнопки:

Elastic.progress-button button { -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s; -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s; } .loading.elastic.progress-button button { -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s; -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s; transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s; }
Если вы любите играть с другими easing-функциями – пробуйте Ceaser , CSS Easing Animation Tool by Matthew Lein.

JavaScript

Начнем с инициализации некоторых элементов: button – это html-элемент button, progressEl – SVG элемент кольцо progress bar, а successEl, errorEl – SVG-элементы галочка и крестик соответственно:

Function UIProgressButton(el, options) { this.el = el; this.options = extend({}, this.options); extend(this.options, options); this._init(); } UIProgressButton.prototype._init = function() { this.button = this.el.querySelector("button"); this.progressEl = new SVGEl(this.el.querySelector("svg.progress-circle")); this.successEl = new SVGEl(this.el.querySelector("svg.checkmark")); this.errorEl = new SVGEl(this.el.querySelector("svg.cross")); // init events this._initEvents(); // enable button this._enable(); }
Добавили функцию SVGEI, которая будет использоваться для того, то бы предоставить SVG-элементы и их paths. Мы кэшируем path и соответственно длину для каждого. Изначально мы «оттягиваем» все paths, управляя значениями свойств strokeDasharray и strokeDashoffset. Позже мы «втянем» их обратно, когда покажем загрузочный круг, или галочку, или крестик. Эту технику хорошо объясняет Jake Archibald в статье Animated line drawing in SVG . Устанавливаем значение stroke-dasharray равное длине path и оттягиваем его. Установив значение stroke-dashoffset также равное его длине, мы больше не видим его. Когда нам нужно будет показать фигуру - установим offset на 0, имитируя рисование фигуры:
function SVGEl(el) { this.el = el; // the path elements this.paths = .slice.call(this.el.querySelectorAll("path")); // we will save both paths and its lengths in arrays this.pathsArr = new Array(); this.lengthsArr = new Array(); this._init(); } SVGEl.prototype._init = function() { var self = this; this.paths.forEach(function(path, i) { self.pathsArr[i] = path; path.style.strokeDasharray = self.lengthsArr[i] = path.getTotalLength(); }); // undraw stroke this.draw(0); } // val in : 0 - no stroke is visible, 1 - stroke is visible SVGEl.prototype.draw = function(val) { for(var i = 0, len = this.pathsArr.length; i < len; ++i){ this.pathsArr[ i ].style.strokeDashoffset = this.lengthsArr[ i ] * (1 - val); } }
Далее, мы должны инициализировать onclick event для нашей кнопки. Сначала кнопка превратится в круг (с помощью добавления класса loading). После окончания анимации, либо будет вызвана callback функция, либо прогресс установится на 100%. В данный момент кнопка отключается (это событие должно бы быть самым первым, однако такой браузер как firefox, например, не сможет удалить transitionend event):

UIProgressButton.prototype._initEvents = function() { var self = this; this.button.addEventListener("click", function() { self._submit(); }); } UIProgressButton.prototype._submit = function() { classie.addClass(this.el, "loading"); var self = this, onEndBtnTransitionFn = function(ev) { if(support.transitions) { this.removeEventListener(transEndEventName, onEndBtnTransitionFn); } this.setAttribute("disabled", ""); if(typeof self.options.callback === "function") { self.options.callback(self); } else { self.setProgress(1); self.stop(); } }; if(support.transitions) { this.button.addEventListener(transEndEventName, onEndBtnTransitionFn); } else { onEndBtnTransitionFn(); } }
Как только прогресс достигнет 100%, необходимо обновить заполнение загрузочного круга. Затем нужно показать либо галочку, либо крестик. Через некоторое время (options.statusTime) мы уберём все индикаторы состояния и заново включаем кнопку. Обратите внимание, что все переходы контролируются посредством CSS.
UIProgressButton.prototype.stop = function(status) { var self = this, endLoading = function() { self.progressEl.draw(0); if(typeof status === "number") { var statusClass = status >= 0 ? "success" : "error", statusEl = status >=0 ? self.successEl: self.errorEl; statusEl.draw(1); // add respective class to the element classie.addClass(self.el, statusClass); // after options.statusTime remove status and undraw the respective stroke and enable the button setTimeout(function() { classie.remove(self.el, statusClass); statusEl.draw(0); self._enable(); }, self.options.statusTime); } else { self._enable(); } classie.removeClass(self.el, "loading"); }; // give it a little time (ideally the same like the transition time) so that the last progress increment animation is still visible. setTimeout(endLoading, 300); }
Кнопка готова!

«We hope you enjoyed this tutorial and find it useful!»

Теги:

• #css3
• #html5
• #javascript

Добавить метки

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

Демо Ι

Код HTML для кнопок

HTML код мы будем использовать очень простой. Для каждой из кнопок мы зададим отдельные классы. А так же зададим классы для применения эффекта при наведении и активации нашей будущей кнопки. В общем вот сам код:

Button :hover :active Button :hover :active Button :hover :active Button :hover :active

Стили CSS для всех кнопок

Разные браузеры некоторые стандартные правила CSS отображают немного по разному. По этому в следующем коде CSS мы сбросим все стили, и добавим некоторые значения по умолчанию. Вот как выглядит код:

Button { display: inline-block; margin: 0 10px 0 0; padding: 15px 45px; font-size: 48px; font-family: "Bitter",serif; line-height: 1.8; appearance: none; box-shadow: none; border-radius: 0; } button:focus { outline: none }

Это совсем не сложно. Ну а сейчас давайте подробнее рассмотрим каждый из 4 стилей наших стильных кнопок.

Плоские кнопки залитые фоном

Подобный тип кнопок очень популярен в настоящее время, так как он отвечает всем современным тенденциям веб дизайна. Другими словами это плоский стиль или Flat дизайн. Тем более люди привыкли к таким кнопкам и охотно по ним кликают.

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

CSS код этих кнопок очень прост. Это огромный плюс мне кажется:

Section.flat button { color: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; border: none; } section.flat button:hover, section.flat button.hover { background-color: #346392; text-shadow: -1px 1px #27496d; } section.flat button:active, section.flat button.active { background-color: #27496d; text-shadow: -1px 1px #193047; }

Стиль кнопок с бордюрами или границами

Этот стиль кнопок находится в то же классе, что и плоские кнопки Единственное различие лишь в том, что здесь мы убираем заливку, а вместо неё задаём правила для отображения бордюра кнопок. Вот на этом изображении всё ясно показано:

И как обычно код CSS очень прост, мы просто добавляем правила для появления бордюра:

Section.border button { color: #6496c8; background: rgba(0,0,0,0); border: solid 5px #6496c8; } section.border button:hover, section.border button.hover { border-color: #346392; color: #346392; } section.border button:active, section.border button.active { border-color: #27496d; color: #27496d; }

Кнопки с тенью и градиентом на CSS

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

В CSS мы будем использовать правила тень и заливки градиента. При наведении тень будет появляться вокруг кнопки а при нажатии внутри.

Section.gradient button { color: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; border: none; border-radius: 15px; } section.gradient button:hover, section.gradient button.hover { box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047; } section.gradient button:active, section.gradient button.active { box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; }

Стильный эффект нажатия

Этот стиль тоже сейчас пользуется большой популярностью и широко используется в дизайне сайтов. Пользователю кажется, что кнопка ка будто и правда нажимается. Вот на изображении подробно видно:

CSS здесь немного будет сложнее и требует использовать немножко математики. Но и это можно с лёгкостью понять. В общем не так уж и всё страшно. Под кнопкой мы поместим не размытую тень, что бы она дала эффект 3D кнопки или же казалась немного выпирающей. При наведении на кнопки мы сделаем фон темнее. А когда пользователь будет нажимать на кнопку мы изменим в стилях позицию самой кнопки. А чтобы это всё выглядело более эффектно и плавно мы добавим CSS3 трансформацию (translateY). Таким образом кнопка будет плавно опускаться вниз. А вот и сам CSS код:

Section.press button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d; } section.press button:hover, section.press button.hover { background-color: #417cb8 } section.press button:active, section.press button.active { background-color: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); }

Демо Ι

Заключение

Вот и всё! Теперь у Вас есть стильные и современные кнопки, которые Вы можете использовать для Ваших потребностей. Естественно Вы можете их изменять до не узнаваемости, это ведь только самый простой пример реализации подобного рода кнопок. Надеюсь, что Вам понравился этот урок. До скорых встреч!

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

Сам фон выставляется с разворота, и он будет прозрачен, что на темном или светлом фоне смотрится отлично. Главное, чтоб на самой гамме шрифт читабельный был. Но здесь веб мастер по свою стилистику, что у него на ресурсе идет как основа, и нужно производить настройку. Если вам нужно поставить один элемент, то просто с кода убираем лишнее, а вот если наоборот добавить, то здесь все просто.

Нужно изначально задать свой класс, что будет отвечать на палитру цвета, и выставлять то количество, сколько вам требуется. Вот как раз для всех элементов установлены атрибуты id и class, который будет указывать их назначение и безусловно все эффекты, что закреплены на ним. Сам дизайн с эффектом так выполнен, что на простой софт портал можно поставить, но не там будет гармонично, больше всего они отлично подойдут на новые авторские ресурсы.

Расмотрим в рабочем виде:

Приступаем к установке:

• ZR-1Скрипты и шаблоны на сайте zornet.ru


• ZR-2Здесь найдете тематические шаблоны сайта.


• ZR-3Также не обойтись без стилистики на zornet.ru

CSS

* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Body {
width: 100%;
height: 100%;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
text-align: center;
background: #1f1e1e;
}

Ul {
margin: 25px auto;
text-align: center;
}

Li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}

@-moz-keyframes rotate {

}

@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

Kingapensive {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 23px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s cubic-bezier(0.42, 0, 0.52, 0.96);
-o-transition: all .25s cubic-bezier(0.42, 0, 0.43, 0.94);
-moz-transition: all .25s cubic-bezier(0.42, 0, 0.33, 0.94);
transition: all .25s cubic-bezier(0.42, 0, 0.45, 0.96);
box-shadow: 3px 4px 5px rgba(27, 26, 26, 0.25);
border-radius: 300px;
z-index: 1;
border-width: 5px;
border-style: solid;
}

Kingapensive:hover {
width: 129.7%;
height: 130%;
left: -15%;
top: -15%;
font-size: 29px;
padding-top: 41px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 9px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}

A.lerstasirodu {
background-color: rgb(47, 187, 41);
color: rgb(25, 38, 84);
border-color: rgba(133, 125, 28, 0.25);
}

A.lerstasirodu:hover {
color: rgb(42, 210, 146);
}

A.discusomplica {
background-color: rgb(7, 172, 193);
color: rgb(4, 57, 64);
border-color: rgba(3, 48, 53, 0.27);
}

A.discusomplica:hover {
color: rgb(6, 66, 74);
}

A.zornertumiksa {
background-color: rgb(204, 184, 15);
color: rgb(62, 23, 10);
border-color: rgba(136, 40, 9, 0.2);
}

A.zornertumiksa:hover {
color: rgba(252,227,1,1);
}

Kingapensive span.kingapensive {
display: block;
opacity: 0;
-webkit-transition: all .5s cubic-bezier(0.42, 0, 0.51, 0.99);
-moz-transition: all .5s cubic-bezier(0.42, 0, 0.52, 1.01);
-o-transition: all .5s cubic-bezier(0.42, 0, 0.49, 0.98);
transition: all .5s cubic-bezier(0.42, 0, 0.49, 0.96);
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #f9f2f2;
}

Kingapensive span:hover {
opacity: .85;
font-size: 15px;
-webkit-text-shadow: 0 1px 1px rgba(14, 14, 14, 0.55);
-moz-text-shadow: 0 1px 1px rgba(19, 18, 18, 0.56);
-o-text-shadow: 0 1px 1px rgba(14, 14, 14, 0.58);
text-shadow: 0 1px 1px rgba(14, 14, 14, 0.55);
}

Discusomplica span {
background: rgba(6, 61, 68, 0.89);
}

Lerstasirodu span {
background: rgba(45, 133, 28, 0.7);
}

Zornertumiksa span {
background: rgba(161,145,0,.7);
}

Отдельные части стиля, веб матер может редактировать в гамме, а эффект очтавить как идет.

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

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код	Описание	Вид
div { border-radius: 10px; }	Радиус скругления для всех уголков сразу.
div { border-radius: 0 10px; }	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div { border-radius: 20px 10px 0; }	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 20px 10px 5px 0; }	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Вы сами себе учитель

Результат данного примера показан на рис. 4.

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx