Border radius css

border-radius

Поддержка браузерами

12.0+ 9.0+ 4.0+ 5.0+ 10.5+ 5.0+

Описание

CSS свойство позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:

Свойство может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:

  • border-radius: 5px 10px 15px 20px; (4 значения)
    1. Верхний левый – 5px
    2. Верхний правый – 10px
    3. Нижний правый – 15px
    4. Нижний левый – 20px
  • border-radius: 10px 20px 15px; (3 значения)
    1. Верхний левый – 10px
    2. Верхний правый и нижний левый – 20px
    3. Нижний-правый – 15px
  • border-radius: 15px 5px; (2 значения)
    1. Верхний левый и нижний правый – 15px
    2. Верхний правый и нижний левый – 5px
  • border-radius: 13px; (1 значение)
    1. Радиус для всех четырёх углов – 13px

Овальные скругления

CSS свойство также позволяет сделать скругление углов ввиде дуги овала, а не круга:

Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ :

border-radius: 50px / 30px;

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

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

Пример с овальными скруглениями:

  • border-radius: 55px 45px 40px / 35px 20px;
    1. Верхний левый – 55px / 35px
    2. Верхний правый и нижний левый – 45px / 20px
    3. Нижний правый – 40px / 35px

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

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

Значение по умолчанию: 0
Применяется: ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse;
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.borderRadius=»5px»

Синтаксис

border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]

Значения свойства

Значение Описание
величина Величина радиуса указывается в единицах измерения, используемых в CSS.
% Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-radius: 100px;
}

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели.

border-radius

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

Свойство CSS border-radius

Border-radius — это свойство, добавляющее элементам скругление углов.

Скругление можно задать для всего элемента сразу:

или разным углам поотдельности, например:

Возможные значения: числа или проценты.

Если задать два значения, первое будет отвечать за верхний левый и нижний правый углы, а второе — за верхний правый и нижний левый:

Значения, заданные через “/”, определяют горизонтальные и вертикальные радиусы:

Таким образом можно задать разные горизонтальные и вертикальные радиусы как для всей фигуры сразу, так и для отдельных углов:

Экспериментируя с радиусами можно сделать, например, яйцо, каплю или лимон:

Или вот такую штуку:

А можно мячик : )

Или облака:

Или цветок, или ещё какую-нибудь чепуху:

Не думаю, что имеет смысл вот так вот рисовать Css-ом, но примеры показывают, что с помощью фантазии и небольшого количества кода можно сделать много интересного.

Статья вдохновлена презентацией про border-radius от Lea Verou

Спецификация: w3.org/TR/css3-background/#the-border-radius

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.

2.16. CSS3-рамка

: сделать полукруглым HTML-элемент

Полукруг получается если у прямоугольника, у которого одна сторона в два раза больше другой, закруглить углы [см. генератор]. С помощью в процентах можно добиться пропорционального изменения высоты и ширины «резинового» блока.

Слово1 да слово2 да слово3 да слово4

<style> .radius { width: 10em; height: 5em; border: 2px solid red; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: mistyrose; } </style> <div class=»radius»>текст</div>

Содержимое, выходящее за границы полукруга с , невидно.

Слово1 да слово2 да слово3 да слово4

<style> .radius { width: 10em; height: 5em; border: 2px solid red; border-radius: 50% 50% 0 0 / 100% 100% 0 0; overflow: hidden; background: mistyrose; } </style> <div class=»radius»>текст</div> <style> .radius { width: 10em; height: 15em; border: 2px solid red; border-radius: 500em 500em 0 0; background: mistyrose; } </style> <div class=»radius»></div> <style> .radius { width: 10em; height: 5em; border: 2px solid red; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: mistyrose; } </style> <div class=»radius»></div> <style> .radius { width: 5em; height: 10em; border: 2px solid red; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background: mistyrose; } </style> <div class=»radius»></div> <style> .radius { width: 5em; height: 10em; border: 2px solid red; border-radius: 100% 0 0 100% / 50% 0 0 50%; background: mistyrose; } </style> <div class=»radius»></div>

: отсечь лишний фрагмент HTML-элемента

Свойство вырезает из элемента часть:

Слово1 да слово2 да слово3 да слово4

<style> .radius { width: 10em; height: 5em; border: 2px solid red; clip-path: inset(0 round 50% 50% 0 0 / 100% 100% 0 0);clip-path: ellipse(50% 100% at 50% 100%); background: mistyrose; } </style> <div class=»radius»>текст</div>

Слово1 да слово2 да слово3 да слово4

<style> .radius { width: 10em; height: 5em; border: 2px solid red; clip-path: circle(50% at center bottom); background: mistyrose; } </style> <div class=»radius»>текст</div>

С помощью

Свойство позволяет вписать текст в окружность, даже без самой окружности, но пока не поддерживается браузерами.

текст текст текст текст текст текст текст текст текст текст

<style> .radius { width: 10em; height: 5em; border: 2px solid red; shape-inside: inset(-2px round 50% 50% 0 0 / 100% 100% 0 0); background: mistyrose; } </style> <div class=»radius»>текст</div>

Закругление углов

Одинаковый радиус для всех углов

Для того чтобы установить одинаковый радиус для всех углов блока нужно указать одно значение:

Чтобы радиус отображался в других браузерах, запись производится с дополнительными префиксами:

Префикс записывается для отображения в браузере ,
а , для и .

Одинаковые радиусы по диагонали

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

1. Верхний левый и нижний правый –

2. Верхний правый и нижний левый –

Два равных радиуса по диагонали и два по отдельности

У свойства border-radius с тремя значениями первый параметр отображает радиус верхнего левого угла, второй верхнего правого и нижнего левого, а третий нижнего правого.

1. Верхний левый –

2. Верхний правый и нижний левый –

3. Нижний-правый –

Каждый радиус задаётся в отдельности

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

1.

CSS3 Border Radius Generator

Верхний левый –

2. Верхний правый –

3. Нижний правый –

4. Нижний левый –

Закругления блока с левой стороны

Закругления блока с правой стороны

Закругления сверху

Закругления снизу

Круг из квадратного блока

Для того чтобы получился круг из квадратного блока ( это относится и к изображению ) нужно чтобы высота и ширина были одинаковы а значение свойства border-radius должно быть пятьдесят процентов.

Блок с закруглениями

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

Оригинал: sitepoint.com/pure-css3-paper-curl

Перевод:

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок.

Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

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

 

Ещё недавно вам надо было делать тень в виде изображения в графической программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с прозрачностью, который накладывается на любой фон, но это может вызвать проблемы в старых браузерах.

К счастью, CSS3 предоставляет хорошую альтернативу с некоторыми преимуществами.

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

Для начала давайте создадим наш единственный HTML-элемент:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *