Как скруглить блоки сайта с CSS?

Question

[Андрей]

Как сделать такие скругления с помощью CSS?
Есть идея конечно сделать это с помощью изображений, но хотелось бы чисто на CSS.
Спасибо)

Пример

Пример 2

Comments

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

Вообще, надоели уже эти закругленные секции.
Каждую неделю по вопросу, макеты немного различаются, но суть везде одна и та же.
Решается это через clip-path, border-radius или svg.
Поиск по тостеру должен помочь.

[profesor08]

Сергей Горячев, просто кто-то себя переоценил и как следствие PANIC

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

profesor08, я себя вообще не оценивал, но эти вопросы реально задаются с завидной регулярностью. И уже отвеченные.

[profesor08]

Сергей Горячев, да я же не про тебя, а про автора

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

profesor08, ааа) просто мне ответил) я не понял, извини)

Answer 1

[Максим Тимофеев]

Как вариант это обычный border-radius у верхнего и среднего блоков снизу, при этом один наезжает на следующий сверху.

Comments

[Андрей]

Даже не представляю как это сделать с помощью бордеров о_О
Можешь пример накидать пожалуйста?

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

Андрей, jsfiddle.net/0wbLeh6x

[Максим Тимофеев]

Андрей, например: https://jsfiddle.net/wokster/m79esd5x/

Answer 2

[Арсений Матыцин]

Чисто CSS — clip-path, если мне не изменяет память. Но там полно браузерных артефактов. Лучше использовать SVG маски.

Answer 3

[Владимир Проскурин]

Решение "в лоб"
https://jsfiddle.net/Vlad_IT/xqhstk83
но я вижу картинка подарка внизу обрезается, поэтому этот способ не очень подходит, если правда не подобрать для родителя снизу такой же border-radius.

Answer 4

[Сергей С.]

у блока - border-radius свойство.