files/ru/web/css/border-radius/index.html


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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216

---
title: border-radius
slug: Web/CSS/border-radius
tags:
  - CSS
  - CSS свойство
  - Скругление
  - Углы
translation_of: Web/CSS/border-radius
---
<div>{{CSSRef}}</div>

<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p>

<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>


<p>Это свойство является <a href="/ru/docs/Web/CSS/Shorthand_properties" title="ru/CSS/Shorthand_properties">короткой записью</a> для четырёх свойств {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} и{{Cssxref("border-bottom-left-radius")}}.</p>

<p>Скругление применяется ко всему {{Cssxref ("background")}}, даже если элемент не имеет границ, точное положение отсечения определяется свойством {{Cssxref ("background-clip")}}.</p>

<p>Свойство <code>border-radius</code> не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение <code>collapse</code>.</p>

<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css no-line-numbers"><strong>/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */</strong>
/* Скругление применяется ко всем четырём углам */
border-radius: 10px;

/* <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
border-radius: 10px 5%;

/* <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
border-radius: 2px 4px 2px;

/* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
border-radius: 1px 0 3px 4px;

<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */</strong>
/* (первые значения радиуса) /<em>радиус</em> */
border-radius: 10px 5% / 20px;

/* (первые значения радиуса) / <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
border-radius: 10px 5% / 20px 30px;

/* (первые значения радиуса) / <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (первые значения радиуса) / <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Глобальные значения */
border-radius: inherit;
border-radius: initial;
border-radius: unset;
</pre>

<p>Свойство <code>border-radius</code> может быть задано как:</p>

<ul>
 <li>одно, два, три или четыре значения {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}}. Используется для задания обычного радиуса углов.</li>
 <li>одна, две, три или четыре пары значений <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, разделённые "/". Используется для задания эллиптического склугления.</li>
</ul>

<h3 id="Значения">Значения</h3>

<table>
 <tbody>
  <tr>
   <td style="vertical-align: top;"><em>radius</em></td>
   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td>
   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для верхнего левого и нижного правого угла элемента. Следует использовать синтаксис с двумя значениями.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td>
   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>top-left</em></td>
   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>top-right</em></td>
   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>bottom-right</em></td>
   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} уставливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>bottom-left</em></td>
   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
   <td style="vertical-align: top;">{{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td>
  </tr>
 </tbody>
</table>

<dl>
 <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
 <dd>Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.</dd>
 <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
 <dd>Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.</dd>
</dl>

<p>Например:</p>

<pre class="brush: css no-line-numbers">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;
</pre>

<pre class="brush: css no-line-numbers">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;
</pre>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Примеры">Примеры</h2>

<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;">  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;
</pre>

<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;">  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;">  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>

<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;">  border: none;
  border-radius: 40px 10px;
</pre>

<pre style="display: inline-block; margin: 10px; background: burlywood; border: none; border-radius: 50%;">  border: none;
  border-radius: 50%;
</pre>

<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px; border-radius: 10px 40px;">  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px; border-radius: 40px;">  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

<h2 id="Живые_примеры">Живые примеры</h2>

<ul>
 <li>Пример 1: <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
 <li>Пример 2: <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
 <li>Пример 3: <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
 <li>Пример 4: <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
 <li>Пример 5: <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>


<p>{{Compat("css.properties.border-radius")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Относящиеся к Border-radius CSS-свойства: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li>
</ul>