Border-top-right-radius

Сердце

Код HTML. Для создания фигуры «сердце», впишем div с ID=”heart”.

1	<div id=»heart»><div>

Код CSS. Сердце можно отобразить с помощью вращения элементов под разными углами. Потребуется смена значений свойства “transform-origin” для изменения позиции вращаемых элементов.

#heart {
position: relative;
}

#heart:before,#heart:after {
content: «»;
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#heart {

positionrelative;

}

#heart:before,#heart:after {

content»»;

width70px;

height115px;

positionabsolute;

backgroundred;

left70px;

top;

-webkit-border-radius50px50px;

-moz-border-radius50px50px;

border-radius50px50px;

-webkit-transformrotate(-45deg);

-moz-transformrotate(-45deg);

-ms-transformrotate(-45deg);

-o-transformrotate(-45deg);

transformrotate(-45deg);

-webkit-transform-origin100%;

-moz-transform-origin100%;

-ms-transform-origin100%;

-o-transform-origin100%;

transform-origin100%;

}

#heart:after {

left;

-webkit-transformrotate(45deg);

-moz-transformrotate(45deg);

-ms-transformrotate(45deg);

-o-transformrotate(45deg);

transformrotate(45deg);

-webkit-transform-origin100%100%;

-moz-transform-origin100%100%;

-ms-transform-origin100%100%;

-o-transform-origin100%100%;

transform-origin100%100%;

}

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

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
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
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

Основы использования

Закругленные углы

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

rounded

rounded-md

rounded-lg

rounded-full

Используйте утилиту для создания кнопок-таблеток.

rounded-full

Сохранить изменения

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

Используйте , чтобы удалить существующий радиус границы элемента.

rounded-none

Сохранить изменения

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

Используйте только для округления одной стороны элемента.

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-lg

Скругление углов отдельно

Используйте только для скругления одного угла элемента.

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-lg

Использование логических свойств

Используйте утилиты , чтобы установить радиус границы, используя логические свойства, которые сопоставляются с соответствующими углами в зависимости от направления текста.

Left-to-right

Right-to-left

Вот все доступные утилиты логических свойств цвета границы и их эквиваленты физических свойств в режимах LTR и RTL.

Класс	Слева направо	Справа налево

Для большего контроля вы также можете использовать для условного применения определенных стилей в зависимости от текущего направления текста.

border-radius – закругление углов

CSS-свойство позволяет скруглить углы границ элементов.

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

В основном используется с одним значением.

Например:

CSS

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

Кроме указания значений, с помощью единиц измерения для задания фиксированной длины (например: px, rem, em и т.д.), вы также можете использовать проценты.

В основном это используется для создания круга путем установки , равным 50%.

CSS

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

Пример, показывающий разницу между и применительно к прямоугольнику:

CSS

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

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

С двумя значениями:

CSS

С тремя значениями:

CSS

Кроме этого, позволяет создавать ассиметрично скруглённые углы. Осуществляется это с помощью косой черты.

CSS

Перед косой черты указываются значения, отвечающие за горизонтальные расстояния, а после — вертикальные.

Звезда

Код HTML. Чтобы создать звезду, напишем div с ID=”star”.

1	<div id=»star»><div>

Код CSS. При создании звезды используем свойства transform равным rotate.

#star {
width: 0;
height: 0;
margin: 70px 0;
color: #F41212;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #F41212;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}

#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #F41212;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: »;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}

#star:after {
content: »;
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #F41212;
border-right: 100px solid transparent;
border-bottom: 70px solid #F41212;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

#star {

width;

height;

margin70px;

color#F41212;

positionrelative;

displayblock;

border-right100pxsolid transparent;

border-bottom70pxsolid#F41212;

border-left100pxsolid transparent;

-moz-transformrotate(35deg);

-webkit-transformrotate(35deg);

-ms-transformrotate(35deg);

-o-transformrotate(35deg);

}

#star:before {

height;

width;

positionabsolute;

displayblock;

top-45px;

left-65px;

border-bottom80pxsolid#F41212;

border-left30pxsolid transparent;

border-right30pxsolid transparent;

content»;

-webkit-transformrotate(-35deg);

-moz-transformrotate(-35deg);

-ms-transformrotate(-35deg);

-o-transformrotate(-35deg);

}

#star:after {

content»;

width;

height;

positionabsolute;

displayblock;

top3px;

left-105px;

color#F41212;

border-right100pxsolid transparent;

border-bottom70pxsolid#F41212;

border-left100pxsolid transparent;

-webkit-transformrotate(-70deg);

-moz-transformrotate(-70deg);

-ms-transformrotate(-70deg);

-o-transformrotate(-70deg);

}

Окружность

Чтобы создать окружность с помощью CSS, воспользуемся тегом div. И зададим значение “circle” для идентификатора.

Код HTML

1	<div id=»circle»><div>

Код CSS

Для CSS необходимо задать значения “width” и “height”. Значение для border radius задаём равным половине от “width” и “height”.

#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

1
2
3
4
5
6
7
8

#circle {

width120px;

height120px;

background#7fee1d;

-moz-border-radius60px;

-webkit-border-radius60px;

border-radius60px;

}

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as for Safari, Google Chrome, and Opera (newer versions), for Internet Explorer, for Firefox, for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Class reference

Class	Properties
.rounded-none	border-radius: 0;
.rounded-sm	border-radius: .125rem;
.rounded	border-radius: .25rem;
.rounded-lg	border-radius: .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: .125rem; border-top-right-radius: .125rem;
.rounded-r-sm	border-top-right-radius: .125rem; border-bottom-right-radius: .125rem;
.rounded-b-sm	border-bottom-right-radius: .125rem; border-bottom-left-radius: .125rem;
.rounded-l-sm	border-top-left-radius: .125rem; border-bottom-left-radius: .125rem;
.rounded-t	border-top-left-radius: .25rem; border-top-right-radius: .25rem;
.rounded-r	border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;
.rounded-b	border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem;
.rounded-l	border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;
.rounded-t-lg	border-top-left-radius: .5rem; border-top-right-radius: .5rem;
.rounded-r-lg	border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;
.rounded-b-lg	border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;
.rounded-l-lg	border-top-left-radius: .5rem; border-bottom-left-radius: .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: .125rem;
.rounded-tr-sm	border-top-right-radius: .125rem;
.rounded-br-sm	border-bottom-right-radius: .125rem;
.rounded-bl-sm	border-bottom-left-radius: .125rem;
.rounded-tl	border-top-left-radius: .25rem;
.rounded-tr	border-top-right-radius: .25rem;
.rounded-br	border-bottom-right-radius: .25rem;
.rounded-bl	border-bottom-left-radius: .25rem;
.rounded-tl-lg	border-top-left-radius: .5rem;
.rounded-tr-lg	border-top-right-radius: .5rem;
.rounded-br-lg	border-bottom-right-radius: .5rem;
.rounded-bl-lg	border-bottom-left-radius: .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;

Примеры

Пример

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

#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; */

Ромб

Код HTML. Для создания ромба создадим div с ID=”rhomb”.

1	<div id=»rhomb»><div>

Код CSS. Здесь, при создании ромба, используется свойство “transform” совместно со значениями “rotate”. Отображаются два треугольника, образуя ромб.

#rhomb {
width: 120px;
height: 120px;
background: #03FA4D;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 110px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#rhomb {

width120px;

height120px;

background#03FA4D;

/* Rotate */

-webkit-transformrotate(-45deg);

-moz-transformrotate(-45deg);

-ms-transformrotate(-45deg);

-o-transformrotate(-45deg);

transformrotate(-45deg);

/* Rotate Origin */

-webkit-transform-origin100%;

-moz-transform-origin100%;

-ms-transform-origin100%;

-o-transform-origin100%;

transform-origin100%;

margin60px10px110px;

}

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

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

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

Например

Результат:

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

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

Яйцо

Код HTML. Для обозначения фигуры яйцо, создадим div с ID=”egg”.

1	<div id=»egg»><div>

Код CSS. Яйцо похоже на овал. Но в данном случае height должно быть больше, чем width. С помощью подбора значений для “radius” можно получить требуемый результат.

#egg {
width: 136px;
height: 190px;
background: #007AAE;
display: block;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

1
2
3
4
5
6
7
8

#egg {

width136px;

height190px;

background#007AAE;

displayblock;

-webkit-border-radius63px63px63px63px108px108px72px72px;

border-radius50%50%50%50%60%60%40%40%;

}

Syntax

The CSS border-radius property can be expressed with one, two, three or four values provided, followed by an optional slash (/) and second set of values.

Syntax — One Value

The syntax for the CSS border-radius property (with 1 value) is:

When one single value is provided, the border-radius value will apply to all four corners of the box (ie: top-left, top-right, bottom-right, bottom-left).

If a slash (/) and another set of border-radius values are provided, then the first set of radius values applies to the horizontal radius and the second set of values applies to the vertical radius. If the slash and second set of values are omitted, then the same values are applied to both the horizontal and vertical radius.

Syntax — Two Values

The syntax for the CSS border-radius property (with 2 values) is:

When two values are provided, the first value will apply to the top-left and bottom-right corners of the box. The second value will apply to the top-right and bottom-left corners of the box.

Syntax — Three Values

The syntax for the CSS border-radius property (with 3 values) is:

When three values are provided, the first value will apply to the top-left corner of the box. The second value will apply to the top-right and bottom-left corners of the box. The third value will apply to the bottom-right corner of the box.

Syntax — Four Values

The syntax for the CSS border-radius property (with 4 values) is:

When four values are provided, the first value will apply to the top-left corner of the box. The second value will apply to the top-right corner of the box. The third value will apply to the bottom-right corner of the box. The fourth value will apply to the bottom-left corner of the box.

The top-left, top-right, bottom-right, and bottom-left values can be one of the following:

Possible Values

The possible values for this property are:

{1,2}

Explanation of the Values

<length>: Specifies the radius using a fixed length, for example, .
<percentage>: Specifies the radius using a percentage value, for example, .

Explanation of the Syntax

You can provide either one or two values:

If you provide only one value, it will determine the radius of both the horizontal radius and the vertical radius.
If you provide two values, the first value determines the horizontal radius, and the second value determines the vertical radius.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

Represents the value specified as the property’s initial value.

Represents the computed value of the property on the element’s parent.

This value acts as either or , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Параллелограмм

Код HTML. Всё как обычно, для обозначения фигуры параллелограмм, зададим div с ID=”parallelogram”.

1	<div id=»parallelogram»><div>

Код CSS. Для отображения параллелограмма надо установить значение skew для transform с поворотом элемента на угол в 30 градусов.

#parallelogram {
width: 160px;
height: 100px;
background: #F8A1A4;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
margin: 20px 0 10px 40px;
}

1
2
3
4
5
6
7
8
9
10

#parallelogram {

width160px;

height100px;

background#F8A1A4;

-webkit-transformskew(30deg);

-moz-transformskew(30deg);

-o-transformskew(30deg);

transformskew(30deg);

margin20px10px40px;

}

Border-Radius Property

The border-radius property is an important concept to understand before styling any CSS figures. It allows rounding corners of HTML elements. The curve for each angle is determined by one or two radii defining its shape — a circle or an ellipse. The radius extends to the entire background, even if the element has no borders.

The border-radius property allows rounding all corners of HTML elements at the same time. If you set two values for the border-radius property, the first value will round the upper left and lower right corners, and the second one will round the upper right and lower left corners. You can use px, em, % or other units to set values.

By using the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties, you can round each corner in its own way.

The values separated by the slash (/) symbol define the horizontal and vertical radii.

Below are some examples of shapes with different border radii.

There are online instruments to play with different border radii: link 1, .

Read also our article about CSS buttons.

Бабл (облачко) для комментария

Код HTML. Для создания облачка для комментария надо всё так же написать div с ID=”comment_bubble”.

1	<div id=»comment_bubble»><div>

Код CSS.

#comment_bubble {
width: 140px;
height: 100px;
background: #94D8F6;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
margin-left:30px;
}

#comment_bubble:before {
content: «»;
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #94D8F6;
border-bottom: 13px solid transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#comment_bubble {

width140px;

height100px;

background#94D8F6;

positionrelative;

-moz-border-radius12px;

-webkit-border-radius12px;

border-radius12px;

margin-left30px;

}

#comment_bubble:before {

content»»;

width;

height;

right100%;

top38px;

positionabsolute;

border-top13pxsolid transparent;

border-right26pxsolid#94D8F6;

border-bottom13pxsolid transparent;

}

Summary

The CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the property.

If the value of this property is not set in a shorthand property that is applied to the element after the CSS property, the value of this property is then reset to its initial value by the shorthand property.

Initial value
Applies to	all elements; but User Agents are not required to apply to and elements when is . The behavior on internal table elements is undefined for the moment.. It also applies to .
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Media	visual
Computed value	two absolute s or s
Animation type	a , or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Using -webkit-border-radius in Safari (Webkit)

The latest versions of Safari now support
-webkit-border-radius. Previously only the ‘nightly builds’
contained this functionality In Opera the syntax for the corners is the
same as in Safari, but the behaviour of border-radius with two
values matches that of Firefox, as seen in Example #7 below:

Example 5
Example 6
Example 7
Example 8
Example 9

For those of you still
seeing square corners, below you can find asnapshot from WebKit showing
the rounded corners effect. Note particularly the change in syntax and
the effect of passing two values to -webkit-border-radius as
compared to the -moz-border-radius example above.

WebKit also has limited support for other CSS3 border properties such
as: multiple backgrounds; border background images; and various advanced
selectors (::select for example) making it a great test
platform for forward-looking developers. Stay tuned to the Surfin’
Safari blog linked below for the latest exciting developments.

Сердце

CSS Справочники

CSS Свойства

​Основы использования

Закругленные углы

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

Скругление углов отдельно

Использование логических свойств

border-radius – закругление углов

Звезда

Окружность

Vendor Prefixes

Class reference

Примеры

Пример

Пример

Пример

Пример

Ромб

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

Яйцо

Syntax

Syntax — One Value

Syntax — Two Values

Syntax — Three Values

Syntax — Four Values

Possible Values

Explanation of the Values

Explanation of the Syntax

Параллелограмм

Border-Radius Property

Бабл (облачко) для комментария

Summary

Using -webkit-border-radius in Safari (Webkit)

Похожие записи:

Похожие записи:

Основы использования