Скругление углов

Сложные структуры 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

Наверняка, вы уже ознакомлены со стандартным использованием 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, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!

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

Свойство Chrome Firefox Opera Safari IExplorer Edge
border-radius 5.04.0 -webkit- 4.03.0 -moz- 10.5 5.03.1 -webkit- 9.0 12.0

CSS синтаксис:

border-radius:"1-4 length | 1-4 % | 1-4 length или 1-4 % / 1-4 length или 1-4 % | initial | inherit";
/* Радиус применяется ко всем четырем углам (по типу дуги окружности) */
border-radius :  15px;

/* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */
border-radius :  15px 35%;

/* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */
border-radius :  14px 18px 50%;

/* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */
border-radius :  22% 11px 14px 15px;


/* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /вертикальный радиус  - значение применяется ко всем четырем углам */
border-radius :  15px 15% / 15px;

/* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left  /вертикальный радиус  - 1-ое значение top-left и bottom-right, второе top-right и bottom-left */
border-radius :  10px 15% / 10px 40px;

/* горизонтальный радиус 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right /вертикальный радиус  - 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */
border-radius :  20px 15px 6em / 20px 25px 30%;

/* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /вертикальный радиус  - 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */
border-radius :  15px 15% / 10px 15em 15px 5em;

JavaScript синтаксис:

object.style.borderRadius = "5px"

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

More Examples

Example

Set rounded corners for an element with a background color:

#rcorners1 {  border-radius: 25px;  background: #73AD21;  padding: 20px;   width: 200px;  height: 150px; }

Example

Set rounded corners for an element with a border:

#rcorners2 {  border-radius: 25px;  border: 2px solid #73AD21;  padding: 20px;
  width: 200px;  height: 150px; }

Example

Set rounded corners for an element with a background image: 

#rcorners3 {  border-radius: 25px;  background: url(paper.gif);  background-position: left top;
  background-repeat: repeat;  padding: 20px;   width: 200px;  height: 150px; }

Example

Also notice this: 

#example1 {  border-radius: 2em / 5em;}/* is equivalent to:border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */#example2 {  border-radius: 2em 1em 4em / 0.5em 3em;
}/* is equivalent to:border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */

Скругленные углы с помощью картинок

Метод предельно прост — каждый уголок будет картинкой, которую абсолютным позиционированием размещаем внутри блока по углам блока-родителя. Например, имеем по дизайну вот такой заголовок:

При этом он должен тянуться вертикально и горизонтально. Наши действия: вырезаем углы и склеиваем их в одну картинку чтобы минимизировать число отдельных файлов (изображение увеличено для наглядности)

Далее городим страшную конструкцию в HTML, а стилями расставляем углы по местам:

Холодильное оборудование

h1 {
	background: #d9f004;
	padding: 10px 20px;
	position: relative;
}
.cornerTL,
.cornerTR,
.cornerBR,
.cornerBL {
	width: 4px;
	height: 4px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background: url(path-to/corners.png);
}
.cornerTR {
	left: auto;
	right: 0;
	background-position: 0 -4px;
}
.cornerBR {
	left: auto;
	right: 0;
	top: auto;
	bottom: 0;
	background-position: 0 -8px;
}
.cornerBL {
	top: auto;
	bottom: 0;
	background-position: 0 -12px;
}

Недостатки

  • наличие внешнего файла(ов)
  • избыточность HTML кода, его не семантичность
  • при изменении цвета блока или радиуса скругления придется перерезать картинки заново, править стили
  • сложно, а иногда и невозможно сделать таким способом скругления (например, скруглить фото на неоднородном фоне — см. пример в начале)

Метод отлично рассмотрен на техногрете Сергеем Чикуенком.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

CSS

1
2

class=”round-corner”>

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

CSS

.round-corner{
height:100px;
width:200px;
background:#2F73B6;
}

1
2
3
4
5

.round-corner{

height100px;

width200px;

background#2F73B6;

}

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

Радиус закругления может задаваться как в пикселях, так и в процентах.

Например:

border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

rocon — js библиотека для создания скругленных углов

Что делает

Скругляет углы у элементов с однородным фоном на любом фоне. Плюс есть возможность добавления скругленного бордюра. Примеры.

Как делает

Для mozilla и браузерах на движках webkit используются специфические CSS правила -moz-border-radius, -webkit-border-radius. Для Opera используется canvas, для IE VML. Детали в статье автора «».

Преимущества

  • быстро работает
  • довольно прост в применении
  • небольшой вес библиотеки
  • продумана возможность резиновости блоков
  • продумано динамическое добавление блоков со скруглениями
  • один внешний файл при любом числе углов

Недостатки

  • пока не реализованы скругления для блока с неоднородным фоном (например с градиентом)
  • не применимо для изображений (img>)
  • местами еще сыровата библиотека

Верим, что Сергей найдет время доработать скрипт. Ждем этого дня не меньше, чем Нового года.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Скругленные углы с помощью jQuery.corner

Плагин для jQuery, который позволяет сделать уголки разнообразной формы. На странице плагина можно оценить большое разнообразие доступных углов. Тут же доступна последняя версия плагина.

Преимущества

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

Недостатки

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

Эти косяки вылезли за 10 минут тестирования. На самом деле думаю косяков больше — в топку такой плагин.

Class reference

Class Properties
.rounded-none border-radius: 0;
.rounded-sm border-radius: 0.125rem;
.rounded border-radius: 0.25rem;
.rounded-md border-radius: 0.375rem;
.rounded-lg border-radius: 0.5rem;
.rounded-full border-radius: 9999px;
.rounded-t-none border-top-left-radius: 0;
border-top-right-radius: 0;
.rounded-r-none border-top-right-radius: 0;
border-bottom-right-radius: 0;
.rounded-b-none border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
.rounded-l-none border-top-left-radius: 0;
border-bottom-left-radius: 0;
.rounded-t-sm border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
.rounded-r-sm border-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem;
.rounded-b-sm border-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
.rounded-l-sm border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
.rounded-t border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
.rounded-r border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
.rounded-b border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
.rounded-l border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
.rounded-t-md border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
.rounded-r-md border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
.rounded-b-md border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
.rounded-l-md border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
.rounded-t-lg border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
.rounded-r-lg border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
.rounded-b-lg border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
.rounded-l-lg border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
.rounded-t-full border-top-left-radius: 9999px;
border-top-right-radius: 9999px;
.rounded-r-full border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
.rounded-b-full border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
.rounded-l-full border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
.rounded-tl-none border-top-left-radius: 0;
.rounded-tr-none border-top-right-radius: 0;
.rounded-br-none border-bottom-right-radius: 0;
.rounded-bl-none border-bottom-left-radius: 0;
.rounded-tl-sm border-top-left-radius: 0.125rem;
.rounded-tr-sm border-top-right-radius: 0.125rem;
.rounded-br-sm border-bottom-right-radius: 0.125rem;
.rounded-bl-sm border-bottom-left-radius: 0.125rem;
.rounded-tl border-top-left-radius: 0.25rem;
.rounded-tr border-top-right-radius: 0.25rem;
.rounded-br border-bottom-right-radius: 0.25rem;
.rounded-bl border-bottom-left-radius: 0.25rem;
.rounded-tl-md border-top-left-radius: 0.375rem;
.rounded-tr-md border-top-right-radius: 0.375rem;
.rounded-br-md border-bottom-right-radius: 0.375rem;
.rounded-bl-md border-bottom-left-radius: 0.375rem;
.rounded-tl-lg border-top-left-radius: 0.5rem;
.rounded-tr-lg border-top-right-radius: 0.5rem;
.rounded-br-lg border-bottom-right-radius: 0.5rem;
.rounded-bl-lg border-bottom-left-radius: 0.5rem;
.rounded-tl-full border-top-left-radius: 9999px;
.rounded-tr-full border-top-right-radius: 9999px;
.rounded-br-full border-bottom-right-radius: 9999px;
.rounded-bl-full border-bottom-left-radius: 9999px;

Общая информация и примечания

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

Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.

Но иногда цвет фона элемента может «просачиваться» за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box.

.element {
    border-radius: 30px;
    background-clip: padding-box;
}

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

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

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

В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы

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

.element {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
}

Кроме этого область вне кривой границы не принимает pointer events, связанные с данным элементом.

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

Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:
 

Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.

Если высота и ширина элемента не равны, мы получим эллиптическую форму:
 

Элемент с радиусом границы 50%, высота и ширина которого не равны.

Официальный синтаксис

Синтаксис:

border-radius:  {1,4}  {1,4}]?

Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table, когда для свойства border-collapse задано значение collapse. На данный момент поведение внутренних элементов таблицы не определено.

Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc(). Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc().

Значения

Неофициальный синтаксис webkit border radius CSS:

border-radius:  ? ? ?;

или так:

border-radius:  ? ? ? /  ? ? ?

В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.

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

Примеры

border-radius: 50%;
border-radius: 30px 20px 40px;
border-radius: 1em 2em;
border-radius: 3em / 2em 4em;
border-radius: 1em 2em 1em 3em / 2em 3em;

Демо-версия

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

Свойство CSS3 Border-radius (закругленные углы)

Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS, а также полных свойств (например, `border-top-left-radius`).

Рекомендация W3C

Поддерживается со следующих версий:

Стационарные

Chrome Firefox IE Opera Safari
4 * 2 * 9 10 3.1 *

Мобильные

iOS Safari Android Opera Mobile Android Chrome Android Firefox
3.2 * 2.1 * 11 56 51

* требуется указание префикса

Данная публикация представляет собой перевод статьи «border-radius» , подготовленной дружной командой проекта Интернет-технологии.ру

Webkit браузеры: отсутствие сглаживания

Chrome и Safari отображают скругление «рвано», нет сглаживания (антиалиасинга) скругления. Сравни скругление в Firefox и Chrome:

border-radius в Firefox
border-radius в Chrome

В Chrome помимо угловатости, в рамке скругления просвечиваются некоторые пиксели основного изображения.

С этими багами пока ничего не поделать. Ждем исправлений от разработчиков браузеров.

В своих проектах вместе с заказчиком решаем, что важней: скорость загрузки и простота кода (используем border-radius), или же красота (делаем картинкой). Замечу, что отсутствие сглаживания не так бросается в глаза при небольших радиусах скругления.

Единственное значение

Начнём с основ. Надеюсь, вы на этом примере не заскучаете. Вы, возможно, знакомы с CSS, да и со свойством — тоже. Оно существует уже довольно давно, и пользуются им, в основном, указывая единственное значение. Выглядит это так: . Возможно, это было одной из самых обсуждаемых возможностей CSS3 в 2010-м, когда лучшим другом дизайнера был сайт css3please.com.

При использовании единственного значения для углы элемента скругляются в соответствии с этим значением.

Скругление всех углов квадрата в соответствии с единственным значением border-radius

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

Скругление углов прямоугольника

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

Восемь значений, разделённых косой чертой

Думаю, многие из вас уже попробовали всё, о чём мы говорили выше. Теперь настало время для по-настоящему интересных экспериментов. Что произойдёт, если значения разделить с помощью косой черты и указать до восьми таких значений? Для начала взглянем на . Она говорит нам о том, что если значения заданы до и после косой черты, тогда значения до косой черты задают горизонтальный радиус, а значения после — вертикальный. Если косой черты нет, то оба радиуса будут одинаковыми.

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

Давайте сравним эффекты, которые дают следующие настройки: и . Результаты получатся очень разными.

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

Если честно, фигуры, полученные в результате применения вышеописанных настроек, выглядят странновато. Однако не забывайте о том, что круги создаются с помощью таких параметров: . Круг получается из-за того, что два значения, задающие одну сторону, складываются и получается 100% (50% + 50% = 100%) и прямых линий от исходного квадрата не остаётся. Если порассуждать в том же духе о восьми значениях, используемых при задании свойства , то окажется, что с их помощью можно описать фигуру, которая похожа на гитарный медиатор или на клетку живого организма.

Фигура, полученная в результате применения 8 значений, разделённых косой чертой

Четыре перекрывающихся эллипса, формирующих фигуру

Мне потребовалось некоторое время на то, чтобы к этому привыкнуть. Порой все эти конструкции бывает сложно осмыслить. Если вас привлекают сложные формы элементов, настраиваемые с помощью , можете воспользоваться этим небольшим инструментом.

Итоги

Теперь, когда вы знаете о том, что при настройке можно использовать 8 значений, то, вы, если попробовали вышеупомянутый инструмент, можете ощутить лёгкое разочарование, так как он не даёт возможности управлять каждым значением независимо. Если это так — то , специально для вас, его версия, поддерживающая независимую настройку всех восьми значений. Прежде чем вы им воспользуетесь — вспомните один разговор из фильма «Охотники за привидениями» 1984-го года:

— Не скрещивайте потоки.— Почему?— А то будет плохо.

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

Перевод статьи CSS Border-Radius Can Do That?

Ссылка на основную публикацию