Круговой прогресс-бар на CSS, уровень два: закруглить концы. Одно требование — и в коде появляются sin() и cos().

Показываем, как из двух градиентов и тригонометрии собрать такой прогресс-бар.

Демонстрация | Смотреть на YouTube | Смотреть в VK

Прощай, квадратный веб

Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147.

Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы.

Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией.

И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро.

В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape.

Совместно с Зионек мы запускаем программу «Фронтенд-разработчик» , открываем запись на программу в соответствии с планом найма, а после обучения компания нанимает выпускников.

HTML Academy предлагает 4 гранта на обучение от компании. Это — последняя возможность зайти в этот поток и гарантировать себе место в штате.

Напишите «ГРАНТ» и начните свою карьеру уже сейчас.

Записаться в Телеграме
Записаться через MAX