Как вы скругляете элементы с помощью border-radius в CSS?

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
275

Всем привет!

Как вы скругляете элементы при помощи border-radius свойства css, ставите 50% или если элемент 20*20px то ставите в два раза больше 40px, или просто в несколько порядков больше типа 100px и пойдет. Вообще странно почему они не сделают какое-то ключевое слово и чтобы оно рендерелось идеально кругло, ведь круги нужны всем.

Заранее всем спасибо за ответы!
E
На сайте с 10.02.2024
Offline
16
#1
Dmitriy_2014 :

Всем привет!

Как вы скругляете элементы при помощи border-radius свойства css, ставите 50% или если элемент 20*20px то ставите в два раза больше 40px, или просто в несколько порядков больше типа 100px и пойдет. Вообще странно почему они не сделают какое-то ключевое слово и чтобы оно рендерелось идеально кругло, ведь круги нужны всем.

Заранее всем спасибо за ответы!

В чем проблема со скруглением 50%?

Если после этого не видите круг - проверьте, что скругляете именно квадратный блок.

Натыкался на такое, блок был сжат соседями, поэтому в итоге овал вместо круга.

Z0
На сайте с 03.09.2009
Offline
819
#2
Dmitriy_2014 :
или если элемент 20*20px то ставите в два раза больше 40px

В 2 раза меньше же...

Dmitriy_2014 :
Вообще странно почему они не сделают какое-то ключевое слово и чтобы оно рендерелось идеально кругло, ведь круги нужны всем.

Квадраты 50% и рендятся идеально кругло. Чего вам еще надо то? =)))

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#3
ziliboba0213 #:
Квадраты 50% и рендятся идеально кругло. Чего вам еще надо то? =)))
Может это шиза, может это мне привиделось, но толи в старых браузерах, раньше, толи при определенных условиях верстки, 50% при приближении в браузере выдавали не совсем идеальный круг, Но сейчас да, надо отдать должное рендерить круг хорошо. А так я просто хотел узнать кто ставить 50% или большое количество px чтобы скруглить.
pavlkonst
На сайте с 22.05.2025
Offline
7
#4
Использовать пиксели плохая практика, особенно если размеры элемента могут меняться (например, на мобилке). Задашь border-radius: 10px для элемента 20x20px - получишь круг. А если элемент станет 40x40px, то это уже будет квадрат с круглыми углами. 50% работает всегда
pavlkonst
На сайте с 22.05.2025
Offline
7
#5
Dmitriy_2014 #:
Может это шиза, может это мне привиделось, но толи в старых браузерах, раньше, толи при определенных условиях верстки, 50% при приближении в браузере выдавали не совсем идеальный круг, Но сейчас да, надо отдать должное рендерить круг хорошо. А так я просто хотел узнать кто ставить 50% или большое количество px чтобы скруглить.
Не привиделось, в старых браузерах алгоритмы сглаживания были так себе, и при сильном зуме могли быть видны артефакты рендеринга. Сейчас с этим все в порядке
Александр Воробьев
На сайте с 03.02.2020
Offline
51
#6
pavlkonst #:
А если элемент станет 40x40px, то это уже будет квадрат с круглыми углами. 50% работает всегда
А "если элемент станет прямоугольным 20x40"? :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий