Border-radius округляет весь блок, а как закруглить только уголки?

Question

[Ingernirated]

https://jsfiddle.net/4qn2Lnht/4/

Comments

[Ankhena]

округляет весь блок, а как закруглить только уголки

Что?

Нарисуйте желаемый результат.

[Сергей delphinpro]

или так https://jsfiddle.net/DelphinPRO/4qn2Lnht/8/

[Ingernirated]

Сергей: интересно, первый раз такое вижу.
что означает деление и можно ещё как-то с радиусом поиграть(формы, направления)?

[Сергей delphinpro]

Ingernirated: это радиус по двум сторонам - горизонтальной и вертикальной

[Сергей delphinpro]

Ingernirated: разумеется можно задавать для четырех углов по отдельности
https://jsfiddle.net/DelphinPRO/4qn2Lnht/10/

Answer 1

[Сергей Горячев]

Ну, епть, конечно же задать border-radius в px, а не в %.
https://jsfiddle.net/webirus/4qn2Lnht/5/

Comments

[Ingernirated]

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

[Сергей Горячев]

Ingernirated: Как сделать угол на CSS с прозрачным бэкграундом?
ruseller.com/lessons.php?id=895&rub=2

Answer 2

[iBird Rose]

задавай в пикселях
https://jsfiddle.net/4qn2Lnht/6/

Comments

[Ingernirated]

а какая разница % или px?

[iBird Rose]

Ingernirated: ой там много расчетов. вот к примеру человек вроде норм расписал stackoverflow.com/questions/29966499/border-radius...

Answer 3

[vetsmen]

Используй не процентное соотношение, а пиксельную величину.
Т.е. https://jsfiddle.net/4qn2Lnht/7/

Answer 4

[Юрий Крот]

В бордере можно задавать 1, 2, 4 значения, они обрабатываются с верхнего левого угла по часовой стрелке.
border-radius:30px 30px 0 0;
Также можно задавать овальное скругление через % или в единицах(px, em, rem)
border-radius:0 0 30px 30px/0 0 50px 50px;
https://jsfiddle.net/4qn2Lnht/12/