Масштабирование радиуса границы CSS: методы масштабирования радиуса границы в CSS

  1. Использование масштаба преобразования:

    .element {
 transform: scale(0.5);
 border-radius: 50%;
}

  2. Использование псевдоэлементов:

    «»;
    display: block;
    padding-top: 100%; /* Сохраняем соотношение сторон */
    border-radius: 50%;
    }

  3. Использование пользовательских свойств (переменных CSS):

    :root {
 --scale-factor: 0.5;
}
.element {
 transform: scale(var(--scale-factor));
 border-radius: calc(50% * var(--scale-factor));
}

  4. Использование SVG в качестве фонового изображения:

    .element {
 background-image: url('path/to/your/svg');
 background-size: cover;
 background-position: center;
 border-radius: 50%;
}

  5. Использование JavaScript:

    var element = document.querySelector('.element');
var scaleFactor = 0.5;
element.style.transform = 'scale(' + scaleFactor + ')';
element.style.borderRadius = (50 * scaleFactor) + '%';