Css: интересные возможности border-radius

Алан-э-Дейл       10.03.2024 г.

Синтаксис

Свойство может быть задано как:

  • одно, два, три или четыре значения или . Используется для задания обычного радиуса углов.
  • одна, две, три или четыре пары значений or , разделённые «/». Используется для задания эллиптического скругления.
radius или устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
top-left-and-bottom-right или устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями.
top-right-and-bottom-left или устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
top-left или устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
top-right или устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
bottom-right или устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
bottom-left или устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

1,4  / 1,4 

где

CSS Свойства

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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-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-eventspositionquotesresizerighttab-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

Примеры

Пример

Установить скругленные углы для элемента с цветом фона:

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

Пример

Установить скругленные углы для элемента с границей:

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

Пример

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

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

Пример

Также обратите внимание на это:

#example1 {  border-radius: 2em / 5em;}/* эквивалентно: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;
}/* эквивалентно: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; */

Скругления, выемки и фаски на углах

Можно выполнить скругление, выемку или снять фаску с углов любого объекта кривой, созданного на основе фигуры, линий текста или растрового изображения. Скругления обеспечивают скругление углов, выемки обеспечивают скругление и инвертирование углов для создания выемки, а фаски обеспечивают скашивание углов, чтобы они выглядели плоскими. CorelDRAW также позволяет выполнить предварительный просмотр углов перед применением внесенных изменений. Для получения дополнительных сведений об изменении квадратов и прямоугольников см. раздел .

Если требуется изменить углы формы без кривых, форма автоматически преобразовывается в кривую. Изменения применяются ко всем углам, если не выбраны отдельные узлы. Однако чтобы выделить отдельные узлы, следует преобразовать объект в кривую вручную с помощью команды Преобразовать в кривую. Нельзя выполнить скругление, снять фаску или сделать выемку сглаженной или симметричной кривой, так как угол должен быть образован двумя прямыми или изогнутыми сегментами, пересекающимися под углом менее 180°.

Закругление углов объекта с помощью функции скругления
1 . Выполните одно из следующих действий.
Выберите кривую с помощью инструмента Указатель .
Выберите отдельные узлы кривой с помощью инструмента Форма .
2 . Нажмите Окно Скругление/выемка/фаска.
3 . В окне настройки Скругление/выемка/фаска включите параметр Скругление.
4 . Введите значение в поле Радиус.
Радиус используется для создания дуги окружности с равноудаленным от любой стороны угла центром. Чем больше значения, тем больше закруглены углы.
5 . Нажмите кнопку Применить.

Кнопка Применить отключена, если не выбраны правильные объекты или узлы.

Можно закруглить все углы квадрата или прямоугольника сразу, перетащив угловой узел в центр объекта, когда активен инструмент Форма. При использовании этого способа фигура не преобразуется в кривые.

Выемки на углах объекта
1 . Выполните одно из следующих действий.
Выберите кривую с помощью инструмента Указатель .
Выберите отдельные узлы кривой с помощью инструмента Форма .
2 . Нажмите Окно Скругление/выемка/фаска.
3 . В окне настройки Скругление/выемка/фаска включите параметр Выемка.
4 . Введите значение в поле Радиус.
Значение радиуса дуги выемки рассчитывается от начальной вершины угла.
5 . Нажмите кнопку Применить.

Кнопка Применить отключена, если не выбраны правильные объекты или узлы.

Скашивание углов объекта с помощью функции фаски
1 . С помощью инструмента Указатель выберите объект.
2 . Выберите Окно Окна настройки Скругление/выемка/фаска.
3 . В окне настройки Скругление/выемка/фаска выберите Фаска в списке Операция.
4 . В области Длина фаски введите значение в поле А, чтобы задать место начала фаски по отношению к исходному углу.
Если нежелательно, чтобы концы фаски были одинаково удалены от исходного угла, щелкните кнопку Блокировать и введите другое значение в поле В. Значения А и В применяются в соответствии с направлениями линий.
5 . Нажмите кнопку Применить.

Чтобы выделить отдельные узлы с помощью инструмента Фигура , сначала требуется преобразовать объект в кривую вручную с помощью команды Преобразовать в кривую.

Не все компоненты программы доступны в пробной версии, версиях для образовательных учреждений и для OEM-партнеров. К неподдерживаемым компонентам могут относиться приложения и функции Corel, утилиты сторонних поставщиков и файлы с дополнительным содержимым. Тем не менее, некоторые из этих компонентов могут упоминаться в приложениях и документации.

(требуется подключение к Интернету.)

Copyright 2017 Corel Corporation. Все права защищены.

Syntax


border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px  3px 4px;



border-radius: 10px / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: unset;

Свойство определяется как:

  • одно, два, три или четыре значения или . Это используется для установки единого радиуса для углов.
  • за ними необязательно следуют «/» и одно, два, три или четыре значения или . Это используется для установки дополнительного радиуса, так что вы можете иметь эллиптические углы.

Values

radius Является или , обозначающим радиус использовать для границы в каждом углу границы. Он используется только в синтаксисе с одним значением.
top-left-and-bottom-right Является или , обозначающим радиус для использования границы в верхний левый и нижний правый углы блока элемента. Он используется только в синтаксисе с двумя значениями.
top-right-and-bottom-left Является или , обозначающим радиус использовать для границы в верхнем правом и нижнем левом углах коробки элемента. Он используется только в синтаксисах с двумя и тремя значениями.
top-left Является или , обозначающим радиус использовать для границы в верхнем левом углу блока элемента. Он используется только в трех- и четырехзначных синтаксисах.
top-right Является или , обозначающим радиус использовать для границы в правом верхнем углу блока элемента. Он используется только в синтаксисе из четырех значений.
bottom-right Является или , обозначающим радиус использовать для границы в нижнем правом углу блока элемента. Он используется только в трех- и четырехзначных синтаксисах.
bottom-left Является или , обозначающим радиус для использования границы в нижнем левом углу блока элемента. Он используется только в синтаксисе из четырех значений.

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

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

Например:

border-radius: 1em/5em;


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;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

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
caption-side
caret-color
@charset
clear
clip
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-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
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
object-fit
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
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
z-index

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр — цвет (#a0b).

Например

Результат:

Мы приводили всегда в качестве примеров тег <div>. Но таким же образом можно скруглять и table, img, iframe. Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius.

Браузеры
Старые браузеры могут не поддерживать свойство border-radius. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS:

Definition and syntax for border-radius

As with many CSS properties relating to margins, padding and borders,
there are four individual properties — one for each corner of a box
element — and one shorthand property. Each of the corner attributes
will accept either one or two values. The border-radius
property will accept up to two values in WebKit browsers and up to eight
now in Firefox 3.5.

Here are the CSS and browser-specific attributes in question:

CSS3 Mozilla equivalent WebKit equivalent
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

Prior to IE9 these CSS3 properties do not work in Internet
Explorer
. The ‘Mozilla’ versions however work perfectly well in
Firefox and other Mozilla-based browsers and the ‘WebKit’ ones in Safari
and Chrome as well as the iPhone/iPad.

Each of the individual corner CSS3 properties take either one or two
length values (generally ‘px’ or ’em’ values). If a single value
is supplied then that becomes the radius of a rounded corner. If two
values are supplied then they become the horizontal and vertical radii
for an elliptical corner.

The Mozilla syntax before Firefox 3.5 only supported round (as
opposed to elliptical) corners and adding a second value would result in
a standard square corner.

The border-radius property in WebKit accepts one or two
values and uses them to style all four corners making a nice symmetric
shape. The allows you to
define four different round or elliptical corners. A slash has been
introduced to separate the horizontal and vertical length
settings.

There is no pure-CSS solution for rounded corners in IE8 or other
primitive browsers. Only a range of JavaScript patches which can be
found by searching online.

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

Определение и использование

Свойство определяет радиус углов элемента.

Совет: Это свойство позволяет добавлять округленные границы к элементам!

Это свойство может иметь от одного до четырех значений. Вот правила:

Четыре значения-граница-радиус: 15пкс 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, и четвертое значение применяется к нижнему левому углу):

Три значения-граница-радиус: 15пкс 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему и нижнему левому углам, а третье значение применяется к нижнему правому углу):

Два значения-граница-радиус: 15пкс 50px; (первое значение применяется к верхнему левому и нижнему углам, а второе значение применяется к верхнему и нижнему левому углам):

Одно значение-граница-радиус: 15пкс; (значение применяется ко всем четырем углам, которые округляются одинаково:

Значение по умолчанию:
Inherited: no
Animatable:

yes. Читайте о animatable

Version: CSS3
Синтаксис JavaScript:

object.style.borderRadius=»25px»

border-radius

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

На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:

See the Pen
border radius by Андрей (@adlibi)
on CodePen.

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

Так, для квадрата на примере ниже, задано такое свойство:

Значения устанавливаются для углов по часовой стрелке.

See the Pen
border radius 4 by Андрей (@adlibi)
on CodePen.

Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.

Количество значений свойства Результат
1 Все стороны выполнены в одном стиле
2 Стиль устанавливается отдельно для горизонтальных (1-е значение) и вертикальных границ (2-е значение)
3 1-е значение – верх лево;
2-е – верх право и низ лево;
3-е – низ право.
4 Все границы выполнены в разных стилях. Соответствие значениям (с 1-го по 4-е) – по часовой стрелке, начиная с верхней.

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

See the Pen
border radius 2 by Андрей (@adlibi)
on CodePen.

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

See the Pen
border radius 50percent by Андрей (@adlibi)
on CodePen.

Гость форума
От: admin

Эта тема закрыта для публикации ответов.