border-radius
CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:
Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:
- border-radius: 5px 10px 15px 20px; (4 значения)
- Верхний левый – 5px
- Верхний правый – 10px
- Нижний правый – 15px
- Нижний левый – 20px
- border-radius: 10px 20px 15px; (3 значения)
- Верхний левый – 10px
- Верхний правый и нижний левый – 20px
- Нижний-правый – 15px
- border-radius: 15px 5px; (2 значения)
- Верхний левый и нижний правый – 15px
- Верхний правый и нижний левый – 5px
- border-radius: 13px; (1 значение)
- Радиус для всех четырёх углов – 13px
Овальные скругления
CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:
Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ / :
border-radius: 50px / 30px;
Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.
Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.
Пример с овальными скруглениями:
- border-radius: 55px 45px 40px / 35px 20px;
- Верхний левый – 55px / 35px
- Верхний правый и нижний левый – 45px / 20px
- Нижний правый – 40px / 35px
Важно понимать, что форма элемента в любом случае остаётся прямоугольной. Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:
Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse; |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.borderRadius=»5px» |
Синтаксис
border-radius: [величина | проценты] [ / [величина | проценты] ]
Значения свойства
| Значение | Описание |
|---|---|
| величина | Величина радиуса указывается в единицах измерения, используемых в CSS. |
| % | Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Скруглённые уголки
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Как сделать блок со скруглёнными уголками через CSS3?
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
Как выделить строку с помощью блока с закруглениями?
На сайте часто возникает необходимость акцентировать внимание на одной строке текста. Это может быть телефон, адрес или заголовок важного сообщения. Главное, чтобы посетители обратили на него внимание. Для этой цели лучше использовать блок с закруглениями, как показали психологические исследования, такое оформление притягивает взгляд чаще, чем обычное прямоугольное.
Как сделать рамку со скругленными уголками?
Для создания рамки вокруг блока используется стилевое свойство border , в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Как добавить скругленные уголки у фотографии фиксированного размера?
Если на сайте применяется группа фотографий одинаковой ширины и высоты, то для них достаточно просто можно установить скругленные уголки. Принцип состоит в том, что поверх каждой фотографии накладывается рисунок, который прячет под собой часть фотографии, образуя тем самым желаемые уголки.
Как сделать блок со скругленными уголками без рисунков?
Скругленные уголки достаточно часто применяются в дизайне, но свойство CSS 3 border-radius поддерживается не всеми браузерами. Поэтому приходится использовать различные ухищрения, чтобы добиться универсального результата. Преимущественно для создания уголков применяются изображения, поэтому интересно будет обойтись без них, только с помощью стилей.
Как создать рамку со скругленными уголками без изображений?
Хотя изображения достаточно успешно применяются для создания скругленных уголков в рамках, стилями порой делать это удобнее. Во-первых, через стили можно легко изменить цвет рамки без редактирования картинок. И, во-вторых, рамки без рисунков всегда отображаются в браузерах одинаково, независимо от того, выключен показ картинок или нет.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как сделать рамку со скругленными уголками?
Для создания рамки вокруг блока используется стилевое свойство border , в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Вначале рисуем рамку в графическом редакторе (рис. 1). В нашем случае она имеет толщину два пиксела и серый цвет (#808080).
Рис. 1. Рамка на прозрачном фоне
Внутри рамка должна быть обязательно прозрачной, тогда можно будет задавать блоку желаемый цвет, а фон под уголками должен совпадать с цветом фона. Как показано на рис. 1, он белый.
Поскольку на рисунке нас интересуют только уголки, то для сайта изображение следует изменить — вырезать уголки и разместить их рядом по горизонтали или вертикали (рис. 2).
Рис. 2. Изображения для публикации
Увеличенный рисунок с уголками на прозрачном фоне представлен на рис. 3. Сверху вниз располагаются уголки: левый верхний, правый верхний, левый нижний и правый нижний.
Рис. 3. Увеличенное изображение уголков
После того, как рисунок подготовлен, пора переходить к коду. Для создания уголков нам потребуется четыре элемента, в их качестве можно использовать теги , , , и другие, для удобства вкладывая их один в другой. Для верхних уголков заведем класс с именем bt , а для нижних — класс bb (пример 1).
Пример 1. Код для создания блока
В стилях к блоку добавляем рамку через свойство border , а вывод уголков делаем через универсальное свойство background . Рамка отображается вокруг блока, поэтому фоновый рисунок окажется внутри границы. Так что придется сдвигать фон на толщину линии через свойства top и left , предварительно установив относительное позиционирование (пример 2).
Пример 2. Добавление закруглений через один рисунок
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Закругленные уголки
Результат данного примера показан на рис. 4.
Рис. 4. Закругленные уголки у блока
Обратите внимание на следующие моменты. Сам рисунок с уголками в виде фона выводится только один раз и далее для определенных элементов меняет свою позицию через свойство background-position . Так как высота блока ограничена значением height , то увидеть весь рисунок целиком нельзя, поэтому мы видим нужный нам фрагмент. Для вложенных тегов сдвигать рисунок приходится с учетом смещения его родителя, поэтому в качестве значения left выступает удвоенная толщина границы.
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 поддерживается всеми современными версиями браузеров.