JS властивість CSSStyleDeclaration.borderBottomLeftRadius

Загальний опис

element.style.borderBottomLeftRadius - це властивість JavaScript, яка дозволяє змінити радіус округлення нижнього лівого кута будь-якого елемента HTML. Використовуючи цей метод, ви може змінити візуальний аспект бордюра ваших елементів, створюючи efekt округлення. Ця властивість часто використовується, коли потрібно змінити або налаштувати деталі візуального дизайну веб-сторінки.

Зазвичай, властивість element.style.borderBottomLeftRadius використовується з рядковим значенням, яке репрезентує величину радіуса. Це можуть бути числові значення, які мають бути вказані в пікселях або відсотках. Для прикладу:

var box = document.querySelector(".box");
box.style.borderBottomLeftRadius = "15px";

В цьому прикладі, ми обираємо елемент HTML з класом "box" і використовуємо властивість borderBottomLeftRadius для створення радіуса округлення 15 пікселів на нижньому лівому куті бордюра цього елемента.

Величина радіусу округлення може бути встановлена як в абсолютних величинах (таких як пікселі), так і в відносних величинах (відсотки). Відсоткове значення визначає радіус округлення як відсоток від ширини елемента. Результат може змінюватися в залежності від властивостей самого елемента.

var box = document.querySelector(".box");
box.style.borderBottomLeftRadius = "50%";

В цьому прикладі, нижній лівий кут боксу буде округленим у вигляді півкола, оскільки радіус округлення встановлено в 50%.

Пам'ятайте, що при використанні element.style.borderBottomLeftRadius радіус округлення впливає тільки на нижній лівий кут. Якщо ви хочете округлити всі кути елемента HTML, вам знадобиться комбінація властивостей: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius та borderBottomLeftRadius. Саме тому краще використовувати загальні властивості, як borderRadius, коли вам потрібно однакове округлення для всіх кутів.

На завершення, element.style.borderBottomLeftRadius - це потужний інструмент для налаштування візуального аспекта ваших елементів HTML. Він дозволяє вам контролювати деталі вашого дизайну, що, в свою чергу, може зробити ваш веб-сайт більш привабливим і унікальним. Досліджуйте його повностю, щоб зрозуміти всі можливості, які він надає.

Порада:	Використовуйте відсотні значення для створення більш адаптивних дизайнів. Коли ви вказуєте величину радіуса у відсотках, радіус округлення автоматично змінюється при зміні ширини елемента. Наприклад, `element.style.borderBottomLeftRadius = "50%"` встановить радіус так, що нижній лівий кут буде схожим на півколо, якщо елемент є квадратом.
Порада:	Пам'ятайте, що властивість `element.style.borderBottomLeftRadius` впливає тільки на радіус округлення нижнього лівого кута. Якщо ви хочете округлити всі кути елемента, вам варто використовувати властивість `element.style.borderRadius`.
Порада:	Якщо ви хочете створити ефект округлення, що легко адаптується до великих змін розмірів елемента, поєднуйте піксельні та відсоткові значення в одній властивості `element.style.borderBottomLeftRadius`. Наприклад, `element.style.borderBottomLeftRadius = "50% 20px"`. Такий прийом створює ефект овального округлення, якщо елемент є прямокутником, і більш адаптивне округлення, якщо елемент має бути квадратом.

Синтаксис

element.style.borderBottomLeftRadius

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

У цьому прикладі ми використовуємо element.style.borderBottomLeftRadius, щоб динамічно змінювати радіус округлення нижнього лівого кута елемента при кожному кліку на нього. Радіус визначається випадковим чином в діапазоні від 0px до 50px. Крім того, ми динамічно оновлюємо текст елемента, щоб відобразити поточне значення радіусу.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/OJYjOMa">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо element.style.borderBottomLeftRadius, щоб встановити радіус округлення нижнього лівого кута елемента, елемент HTML з класом .myElement.

// Створюємо змінну для доступу до елементу HTML
var element = document.querySelector(".myElement");

// Встановлюємо радіус округлення нижнього лівого кута елемента
element.style.borderBottomLeftRadius = "15px";

У цьому прикладі ми використовуємо element.style.borderBottomLeftRadius для динамічної зміни радіусу округлення нижнього лівого кута елемента при кліку на нього. Ми використовуємо умову if для встановлення радіусу округлення в 50%, якщо поточне значення радіусу дорівнює 20px, і навпаки.

// Створюємо змінну для доступу до елементу HTML
var element = document.querySelector(".myElement");

// Створюємо функцію для зміни радіусу округлення
function changeBorderRadius() {
  var borderRadius = element.style.borderBottomLeftRadius;

  if (borderRadius == "50%") {
    element.style.borderBottomLeftRadius = "20px";
  } else {
    element.style.borderBottomLeftRadius = "50%";
  }
}

// Використовуємо функцію при кліку на елемент
element.onclick = changeBorderRadius;

JS довідник

JavaScript

Наповнення JS розділу