diff --git a/files/uk/web/css/border-radius/all-corner.png b/files/uk/web/css/border-radius/all-corner.png new file mode 100644 index 0000000000..cc4161d532 Binary files /dev/null and b/files/uk/web/css/border-radius/all-corner.png differ diff --git a/files/uk/web/css/border-radius/bottom-left.png b/files/uk/web/css/border-radius/bottom-left.png new file mode 100644 index 0000000000..f74188a307 Binary files /dev/null and b/files/uk/web/css/border-radius/bottom-left.png differ diff --git a/files/uk/web/css/border-radius/bottom-right.png b/files/uk/web/css/border-radius/bottom-right.png new file mode 100644 index 0000000000..decde09801 Binary files /dev/null and b/files/uk/web/css/border-radius/bottom-right.png differ diff --git a/files/uk/web/css/border-radius/index.md b/files/uk/web/css/border-radius/index.md new file mode 100644 index 0000000000..ebdc417fe4 --- /dev/null +++ b/files/uk/web/css/border-radius/index.md @@ -0,0 +1,278 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.border-radius +--- + +{{CSSRef}} + +Властивість [CSS](/uk/docs/Web/CSS) **`border-radius`** закруглює кути зовнішнього краю меж елемента. Можна вказати один радіус – для симетричного закруглення, або два – для еліптичного закруглення. + +{{EmbedInteractiveExample("pages/css/border-radius.html")}} + +Радіус застосовується до всього {{cssxref("background", "тла")}}, навіть якщо елемент не має меж; точне положення обрізання визначається властивістю {{cssxref("background-clip")}}. + +Властивість `border-radius` не застосовується до табличних елементів, коли властивість {{cssxref("border-collapse")}} має значення `collapse`. + +> **Примітка:** Так само як з рештою властивостей-скорочень, окремі підвластивості не можуть успадковуватися отак: `border-radius:0 0 inherit inherit`, що частково відкинуло б наявні визначення. Натомість слід використовувати окремі, розгорнуті властивості. + +## Складові властивості + +Ця властивість є скороченням наступних властивостей CSS: + +- [`border-top-left-radius`](/uk/docs/Web/CSS/border-top-left-radius) +- [`border-top-right-radius`](/uk/docs/Web/CSS/border-top-right-radius) +- [`border-bottom-right-radius`](/uk/docs/Web/CSS/border-bottom-right-radius) +- [`border-bottom-left-radius`](/uk/docs/Web/CSS/border-bottom-left-radius) + +## Синтаксис + +```css +/* Синтаксис першого радіуса дозволяє від одного до чотирьох значень */ +/* Радіус встановлюється для всіх 4 сторін */ +border-radius: 10px; + +/* згори-зліва-і-знизу-справа | згори-справа-і-знизу-зліва */ +border-radius: 10px 5%; + +/* згори-зліва | згори-справа-і-знизу-зліва | знизу-справа */ +border-radius: 2px 4px 2px; + +/* згори-зліва | згори-справа | знизу-справа | знизу-зліва */ +border-radius: 1px 0 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: revert-layer; +border-radius: unset; +``` + +Властивість `border-radius` вказується наступним чином: + +- одне, два, три або чотири значення {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}. Встановлюється для встановлення єдиного радіуса для кутів. +- після цього, необов'язково, "/" і один, два, три або чотири значення `` чи ``. Використовується для встановлення додаткового радіуса, щоб отримати еліптичне скруглення кутів + +### Значення + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
радіусБлакитний прямокутник зі світло-сірою межею. Всі 4 кути закруглені. + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання в кожному куті межі. Використовується лише в синтаксисі одного значення. +
згори-зліва-і-знизу-справа + Блакитний прямокутник зі світло-сірою межею. 2 кути, згори зліва й внизу справа, закруглені. + + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання у верхньому лівому й нижньому правому кутах рамок елемента. Використовується лише в синтаксисі двох значень. +
згори-справа-і-знизу-зліва + Блакитний прямокутник зі світло-сірою межею. 2 кути, згори справа і внизу зліва, закруглені. + + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання у верхньому правому й нижньому лівому кутах рамок елемента. Використовується лише в синтаксисах двох і трьох значень. +
згори-зліваБлакитний прямокутник зі світло-сірою межею. Кут згори зліва закруглений. + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання у верхньому лівому куті рамок елемента. Використовується лише в синтаксисах трьох та чотирьох значень. +
згори-справаБлакитний прямокутник зі світло-сірою межею. Кут згори справа закруглений. + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання у верхньому правому куті рамок елемента. Використовується лише в синтаксисі чотирьох значень. +
знизу-справаБлакитний прямокутник зі світло-сірою межею. Кут внизу справа закруглений. + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання у нижньому правому куті рамок елемента. Використовується лише в синтаксисах трьох і чотирьох значень. +
знизу-зліваБлакитний прямокутник зі світло-сірою межею. Кут знизу зліва закруглений. + {{cssxref("<length>")}} чи {{cssxref("<percentage>")}}, що позначає радіус для використання у нижньому лівому куті рамок елемента. Використовується лише в синтаксисі чотирьох значень. +
+ +- {{cssxref("<length>")}} + - : Позначає розмір радіуса кола, або ж – великої й малої півосей еліпса, використовуючи значення довжини. Від'ємні значення є недійсними. +- {{cssxref("<percentage>")}} + - : Позначає розмір радіуса кола, або ж – великої й малої півосей еліпса, використовуючи відсоткові значення. Відсоткові значення для горизонтальної осі стосуються ширини рамок; відсоткові значення для вертикальної осі стосуються висоти рамок. Від'ємні значення є недійсними. + +Наприклад: + +```css +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; +``` + +```css +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; +``` + +## Формальне визначення + +{{CSSInfo}} + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +```html hidden +
+  border: solid 10px;
+  border-radius: 10px 40px 40px 10px;
+
+
+  border: groove 1em red;
+  border-radius: 2em;
+
+
+  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+
+  border: none;
+  border-radius: 40px 10px;
+  background: gold;
+
+
+  border: none;
+  border-radius: 50%;
+  background: burlywood;
+
+
+  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+
+  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+``` + +```css hidden +pre { + margin: 20px; + padding: 20px; + width: 80%; + height: 80px; +} + +pre#example-1 { + border: solid 10px; + border-radius: 10px 40px 40px 10px; +} + +pre#example-2 { + border: groove 1em red; + border-radius: 2em; +} + +pre#example-3 { + background: gold; + border: ridge gold; + border-radius: 13em/3em; +} + +pre#example-4 { + border: none; + border-radius: 40px 10px; + background: gold; +} + +pre#example-5 { + border: none; + border-radius: 50%; + background: burlywood; +} + +pre#example-6 { + border: dotted; + border-width: 10px 4px; + border-radius: 10px 40px; +} + +pre#example-7 { + border: dashed; + border-width: 2px 4px; + border-radius: 40px; +} +``` + +{{EmbedLiveSample("pryklady", "200", "1150")}} + +### Живі зразки + +- Зразок 1 : +- Зразок 2 : +- Зразок 3 : +- Зразок 4 : +- Зразок 5 : + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Пов'язані з border-radius властивості CSS: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, {{cssxref("border-end-end-radius")}} diff --git a/files/uk/web/css/border-radius/top-left-bottom-right.png b/files/uk/web/css/border-radius/top-left-bottom-right.png new file mode 100644 index 0000000000..b67e05a47d Binary files /dev/null and b/files/uk/web/css/border-radius/top-left-bottom-right.png differ diff --git a/files/uk/web/css/border-radius/top-left.png b/files/uk/web/css/border-radius/top-left.png new file mode 100644 index 0000000000..c3678095b2 Binary files /dev/null and b/files/uk/web/css/border-radius/top-left.png differ diff --git a/files/uk/web/css/border-radius/top-right-bottom-left.png b/files/uk/web/css/border-radius/top-right-bottom-left.png new file mode 100644 index 0000000000..4972318172 Binary files /dev/null and b/files/uk/web/css/border-radius/top-right-bottom-left.png differ diff --git a/files/uk/web/css/border-radius/top-right.png b/files/uk/web/css/border-radius/top-right.png new file mode 100644 index 0000000000..770fec31e7 Binary files /dev/null and b/files/uk/web/css/border-radius/top-right.png differ diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index a3fab5aaac..9db9d8aba1 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -23,6 +23,8 @@ емах емів закорочується +згори-зліва-і-знизу-справа +згори-справа-і-знизу-зліва ітеративно картинки-в-картинці картинку-в-картинці