Какие способы реализовать обрезанную круглую рамку?
https://codepen.io/wokster/pen/MzbmLO
или как вариант все тоже самое но для псевдоэлемента :before, что бы не вращать контент
Можно конечно и svg, но в данном случае избыточно. Голый css отлично справляться. Это если надо что-то сложнее или анимацию сложную, тогда svg.
псевдоэлемент цвета фона поверх бордера, не?