How to create folded edges with css

Question

Image i need to create with css

I cannot understand how should i create this with css.Please help

Answer 1

in css you want to add class. html:

css: .rounded{border-radius:25px}

you can even set each corner to different radius css: rounded{25px 50px 30px 10px}

Answer 2

What are you looking for is sort of ribbon effect.
First, you must use the ::before and ::after pseudo elements to create the two elements you need, the triangles, and place them absolutelly from the main content.
Then you have to transform the 2 elements in angles playing with borders.

For example:

        .box {
            position:relative;
            width: 200px;
            height: 100px;
            margin: 10px auto 0;
            background-color: red;
        }
        .box::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 0;
            border-width: 10px 10px 0px 0;
            border-color: transparent blue transparent transparent;
            border-style: solid;
        }
        .box::after {
            content: "";
            position: absolute;
            top: -10px;
            right: 0;
            border-width: 0px 10px 10px 0px;
            border-color: transparent transparent blue transparent;
            border-style: solid;
        }

<div class="box"></div>

Here you can find some examples on how triangles in css works: How do CSS triangles work?