). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Синтаксис CSS border-radius :
border-radius : [значение_скругления ];
Как скруглить углы в HTML через CSS
Рассмотрим примеры скругления углов через CSS. Например
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:
- Верхний левый угол (в примере это 10px)
- Верхний правый угол (в примере это 7px)
- Нижний правый угол (в примере это 0px)
- Нижний левый угол (в примере это 0px)
Например
Результат:
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Результат:
ПримечаниеЗначения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
Например:
border : 1px solid #00ff00 ;
- Толщина - задается чаще всего в пикселях
- Тип линии
может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
- Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)
Приведем пример
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).
Например
Результат:
Мы приводили всегда в качестве примеров тег
Браузеры
Старые браузеры могут не поддерживать свойство border-radius
. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!
Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.
Основы использования css border
Наверняка, вы уже ознакомлены со стандартным использованием border свойства:
Border: 1px solid black;
Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:
Border-width: thick; border-style: solid; border-color: black;
Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.
Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:
Box { border: 1px solid red; } .box:hover { border: 1px solid green; }
Более элегантно и проще можно сделать следующим образом:
Box { border: 1px solid red; } .box:hover { border-color: green; }
Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.
Border-Radius
Border- radius - это «золотое» свойство CSS3 - первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.
Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.
Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.
Еще одна привилегия в том, что мы можем использовать специальные значения для каждой из сторон блока:
Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.
Наподобие как margin и padding, мы можем сжать синтаксис:
/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;
Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:
Lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }
Идем далее основ
Во многих дизайнеров все познания, в области css свойства border, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!
Сложные структуры css border
Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…
Border-Style
Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.
Border: 20px groove #e3e3e3;
Или в расширенном синтаксисе:
Border-color: #e3e3e3; border-width: 20px; border-style: groove;
Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.
Outline
Наиболее популярная техника создания двойной рамки - использование свойства outline.
Box { border: 5px solid #292929; outline: 5px solid #e3e3e3; }
Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?
Псевдоэлементы
Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов:before и:after. С помощью которых можно добавить дополнительные рамки к элементу:
Box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; }
На вид не очень элегантно, но по крайней мере, это работает. Немного проблемно разобраться с последовательность цветов в рамках… но понять можно.
Box-Shadow
Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:
Box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; }
В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.
Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.
«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»
Изменяем углы
В дополнение к используемому простому значению border-radius, мы можем указать два отдельных - разделяя их через / мы укажем горизонтальный и вертикальный радиус.
Для примера:
Border-radius: 50px / 100px; /* horizontal radius, vertical radius */
… это равносильно:
Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:
Box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }
CSS формы, с использованием border
Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…
Для следующих нескольких примеров, мы будем использовать следующую разметку:
…и следующий базовый стиль:
Box { width: 200px; height: 200px; background: black; }
Наиболее частый пример использования CSS форм - создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.
Назначим к div блоку класс arrow:
Arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }
Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:
Arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; }
Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.
Arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; }
Отлично получилось! Но это противоречит семантической верстке , создавать.arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.
Создаем Speech Bubble
Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.
Speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; }
Speech-bubble:after { content: ""; }
На этом этапе, мы создадим стрелочку, которую делали прежде, добавим к элементу и остается только позиционировать:
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; }
Если мы хотим, чтобы стрелочка была направлена вниз, нам придется установить все border прозрачными, кроме верхнего.
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; }
Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; }
Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.
Speech-bubble { /* … other styles */ border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ }
Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.
/* Speech Bubbles Usage: примените класс.speech-bubble и.speech-bubble-НАПРАВЛЕНИЕ, как показано ниже
Бонус! Вертикальное центрирование внутри блока
Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:
Speech-bubble { /* other styles */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; }
Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы - даже сердечки и знак биологической опасности.
Biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow; }
Заключение
Думаю, все знают, что сделать закругленные углы у блоков – большая проблема. Кросс-браузерного решения без применения JS костылей пока не существует. С релизом IE9 головной боли станет меньше, но если вы все еще кипятите верстаете под IE6/7, для вас это не станет спасением. Но даже если IE6/7 канут в лету, еще немало времени пройдет, пока мы забудем о 8-й версии этого браузера, который тоже не поддерживает параметр border-radius. Иными словами, сидеть на яваскриптовых стероидах наши сайты будут еще долго.
Статей на тему округлых форм написано немало, но все они (те, что я смог найти), умалчивают о тонкостях и нюансах применения фиксов для существующей проблемы. Я постараюсь перечислить все те трудности, с которыми мне пришлось столкнуться при использовании популярных решений.
Для начала, скажу пару слов о том, как изменяется ситуация с border-radius при выходе новых версий браузеров.
Во-первых, 4-я версия FireFox теперь не нуждается в своем собственном параметре -moz-border-radius. IE9, как я уже говорил, тоже реализует поддержку border-radius, во всяком случае, в RС версии она уже присутствует. В Opera все замечательно с версии 10.5.
Теперь решения для тех, кого Бог обделил.
И так, существует два наиболее известных и применяемых способа сделать border-radius кросс-браузерным . Первый из них – Curved-corner , использующий VML и behaviour . Второй – CSS3 PIE , который имеет две реализации. Одна также основана на VML и behaviour, вторая представляет из себя JavaScript библиотеку.
Рассмотрим оба решения.
Curved-corner
Из плюсов я нашел только один – малый вес подключаемого border-radius.htc файла. Текущая версия реализации занимает всего 5кб. Против PIE, который весит 33 кб, безусловно, это значительное преимущество. Но на этом плюсы заканчиваются, во всяком случае для меня.
Минусов очень много. Например, не будет работать такая вот конструкция:
#selector { border: #c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: #f0ecdf; behavior: url(border-radius.htc); }
Во-первых, нельзя убрать рамку с одной из сторон. То есть параметр border-top прибьет рамку вообще всего блока, хотя углы останутся закругленными. Забавно, но параметр border-bottom рамку оставит на месте, но эффекта никакого не даст, то есть бордер останется вокруг всего блока.
Во вторых, если вам необходимо обтесать всего два угла, как в примере, то вас ждет разочарование. Curved-corner такого не умеет. Он может закруглять только все углы блока и на равное значение радиуса. Углов с разным радиусом закругления добиться не получится. Правильные и рабочий вариант выглядит только так:
#selector { border: #c6c5c2 1px solid; border-radius: 6px; behavior: url(border-radius.htc); }
В-третьих, Curved-corner не работает для блоков, у которых в качестве фона задано изображение.
Ну последний неприятный момент – скорость работы. Углы закругляются далеко не сразу. С момента загрузки страницы и до того, как углы примут нужную форму, проходит около секунды. Визуально задержка очень заметна и хорошо бросается в глаза.
Были еще какие-то проблемы (читайте нюансы), но сейчас уже не припомню.
Резюмируя, можно сказать, что данный фикс подходит только для совсем простых задач. Хотя, как показывает практика, такие простые задачи попадаются редко.
CSS3 PIE
Весит много, ничего не скажешь. Версия PIE 1.0 beta 4 занимает 33 кб, как в реализации.htc, так и js аналог. Но при этом CSS3 PIE лишен всех тех проблем с border-radius, которые есть у Curved-corner. Также мне значительно импонирует возможность использовать JS реализацию, которая не требует дополнительного кода в CSS и может цепляться на любой селектор (при использовании jQuery, например).
У CSS3 PIE задержка в отрисовке также присутствует (иногда нет), но значительно меньшая, чем в случае с Curved-corner. Она практически незаметна, что делает библиотеку весьма привлекательной и пригодной к использованию.
Ну и самое замечательное заключается в том, что CSS3 PIE исправляет проблему не только с border-radius , но и добавляет значительно количество свойств CSS3 в кривые майкрософтовские браузеры. Так, например, будут работать border-image и box-shadow, свойства работы с градиентами. Решается проблема прозрачности png и многое другое. Все это лихо компенсирует и объясняет размере CSS3 PIE.
Еще дегтя
Увы, но ни CSS3 PIE, ни Curved-corner не способны заткнуть собой все щели. Так, например, круглых углов вы не получите у тех элементов, которые изначально скрыты – имеют параметр display: none . Аналогично с параметром visible и его значением hidden . Могут возникнуть проблемы, если элемент позиционируется абсолютно. Увы, дать детальное описание ситуации не могу, так как не удалось повторить условия, при которых возникали проблемы, но помню, что проблемы определенно были.
Есть еще одна известная мне загвоздка. Для того, чтобы применить border-radius для элемента при наведении на него курсора мыши, например так:
A:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }
Необходимо, чтобы этот элемент имел закругленные углы изначально, иначе эффекта не будет. То есть, в данном примере, должен быть селектор A, у которого также будет задан border-radius и border:
A { background: #fff; color: #000; border: #fff 1px solid; border-radius: 6px } a:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }
Итоги
Лично для меня, безусловным фаворитом является CSS3 PIE. Действительно справляется со своей задачей и делает это достойно. Ко всему прочему, библиотека развивается. Это развитие сопровождается регулярным выходом новых версий, что весьма обнадеживает.
The border-radius property does not apply to table elements when have shared or separate borders."> border-collapse is collapse .
Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
Syntax
/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px 5% / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: unset;The border-radius property is specified as:
- one, two, three, or four CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.">
or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> values. This is used to set a single radius for the corners. - followed optionally by "/" and one, two, three, or four
or Values. This is used to set an additional radius, so you can have elliptical corners.
Values
radius | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-left-and-bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-right-and-bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
top-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
Border-radius: 1em/5em; /* ... is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; border-radius: 4px 3px 6px / 2px 4px; /* ... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
Formal syntax
1,4 / 1,4where The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. Update compatibility data on GitHub Notes
Notes
Prefixed
Notes
Notes
Prefixed
Notes
Notes
Notes
Notes
Prefixed
Prefixed
Prefixed
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ. Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока). Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например: BorderElement {
background-color: #EEDDFF;
border: 6px solid #7922CC;
border-radius: 25px;
}
Стиль, описанный выше, даст следующий результат на элементе Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления - большое поле для фантазии! Пример: BorderElement {
background-color: #EEDDFF;
border: 6px solid #7922CC;
border-radius: 25px;
}
.borderElement1 {
background-color: #FFE8DB;
border: 6px solid #FF5A00;
border-radius: 15px 100px 15px 100px;
}
Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей: BorderElement {
background-color: #EEDDFF;
border: 6px solid #7922CC;
border-radius: 280px/100px;
}
Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства: На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, - например, 20px , - это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса - 30px , а второе - длиной вертикальной полуоси - 20px: Свойство CSS border-radius поддерживается всеми современными версиями браузеров.Examples
border: solid 10px;
/* the border will curve into a "D" */
border-radius: 10px 40px 40px 10px;
border: groove 1em red;
border-radius: 2em;
background: gold;
border: ridge gold;
border-radius: 13em/3em;
border: none;
border-radius: 40px 10px;
border: none;
border-radius: 50%;
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
Live Samples
Specifications
Specification
Status
Comment
CSS Backgrounds and Borders Module Level 3
The definition of "border-radius" in that specification.
Candidate Recommendation
Initial definition
Initial value
Applies to
all elements; but User Agents are not required to apply to table and inline-table elements when have shared or separate borders."> border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
Inherited
no
Percentages
refer to the corresponding dimension of the border box
Media
visual
Computed value
as each of the properties of the shorthand:
Animation type
as each of the properties of the shorthand:
Canonical order
the unique non-ambiguous order defined by the formal grammar
Browser compatibility
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Edge Mobile
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
Basic support
Chrome
Full support
4 Edge
Full support
12 Full support
12
Full support
12 Firefox
Full support
4 IE
Full support
9
Opera
Full support
10.5 Safari
Full support
5 WebView Android
Full support
2 Edge Mobile
Full support
Yes Full support
Yes
Full support
Yes Firefox Android
Full support
Yes Opera Android
Full support
Safari iOS
Full support
Yes
Elliptical borders
Chrome
Full support
Yes Edge
Full support
12
Firefox
Full support
3.5
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
Yes WebView Android
?
Chrome Android
Full support
Yes
Safari iOS
?
Samsung Internet Android
Full support
Yes
4 values for 4 corners
Chrome
Full support
4
Edge
Full support
12
Firefox
Full support
Yes
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
5
WebView Android
?
Chrome Android
Full support
Yes
Edge Mobile
Full support
Yes
Firefox Android
Full support
Yes
Opera Android
No support
No
Safari iOS
?
Samsung Internet Android
Full support
Yes
Percentages
Chrome
Full support
Yes Edge
Full support
12
Firefox
Legend
Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
See also
Как закруглить углы: свойство CSS3 border-radius
Принцип скругления углов
-
SQL запрос INSERT INTO — наполнить базу данных информацией
Всем привет! В данной статье речь пойдет о том, как можно добавлять данные в таблицу в Microsoft SQL Server, если Вы уже хоть немного знакомы с языком T-SQL, то наверно поняли, что сейчас мы будем разговаривать об инструкции INSERT, а также о том,...
IP-телефония -
Обозначение клавиш на клавиатуре
Привет всем читателям блога. Скажите друзья, задумывались ли вы, какой большой функционал таит в себе клавиатура? Большинство людей даже не подозревает, что с её помощью можно выполнять действия, которые могут облегчить и . Не печально ли, что...
Мегафон -
Как изменить разрешение экрана
В современном мире все стремительно меняется. Фотоаппараты всех моделей, от самых дешевых «мыльниц» до профессиональных «зеркалок», умеют снимать видеоролики качества HD. Такое видео возможно и для дорогих моделей мобильных телефонов. Стандарты...
Мобильные операторы