kpa18, padding, margin, width, grid, flex и наверное, ещё миллион способов. В некоторых с участием calc.
Я бы порекомендовала пройти что-нибудь типа тренажеров HTML Academy для освоения базовых навыков.
Хотя бы размеры, отступы, позиционирование, выравнивание, флексы, гриды. Дальше смотреть по потребностям.
Как альтернатива почитать на Доке https://doka.guide/css/
Давайте объясню, что тут происходит. У части проблем известные решения или они тут ежедневно повторяются, но некоторые без кода не решаются. Кастомные курсоры это не лучшая практика, не любят этого пользователи. Поэтому, проблемы с ними редкие и лично у меня в голове есть только предположения, что происходит и их бы проверить. Для этого нужна песочница, которую обычно делает автор вопроса.
Прикладывать код и песочницу это очень хорошая практика для задающих вопросы. Так ответы будут и быстрее и качественнее.
kpa18, прекрасный результат. Осталось довести до ума.
В идеале ещё бы связать радиус и градиент тоже через кастомные. А то сейчас у вас одно в px, а другое в em.
Можно сделать радиус чуть больше и на 1-2px заводить на границу. Если остается пропуск 1px. Так вполне может быть при округлениях.
Тогда будет что-то типа bottom: calc(100% + var(--gap) - 1px)
