I can't retrieve a curved border effect with pure css

Question

I have to reproduce a mock up with a box with a top border that have a curved line in the middle.

Like this above. I can't figure out how can i do it. I think with some position and border setup. i have been trying for 2 hours but I can't.

I got some ready code on the net but I can't adapt it to my needs. Here the code:

<div id="message-holder"></div>

#message-holder {
    margin-top:50px;
    width:300px;
    height:300px;
    left: 37%;
    background: #F9EDEF;
    position:relative;
    border:1px solid #edb2b7;
}

#message-holder:before, #message-holder:after{
    content:"";
    position:absolute;
    top:24px;
    left:110px;
    border-bottom:25px solid #f9edef;
    border-left:25px solid transparent;
    border-right:25px solid #f9edef;
}

#message-holder:before{
    top:25px;
    border-bottom-color:#edb2b7;
}

This is entirely wrong!

Could someone help me ?

Please give the code that you have tried – Gokul P P Jan 06 '17 at 05:21 — Gokul P P, Jan 06 '17 at 05:21
I added code on the post – lisarko8077 Jan 06 '17 at 05:21 — lisarko8077, Jan 06 '17 at 05:21

score 1 · Accepted Answer · answered Jan 06 '17 at 06:01

You can use CSS border color/width trick to achieve such effect.

Here's an example.

To control the length of the edge, you can change the value inside :after pseudo-element

    border-right-width: 100px;

body {
    background-color: #153050;
}
#header {
    background-color: #0D4585;
    padding: 10px 20px 20px;
    border-top-right-radius: 20px;
    border-bottom: 1px solid darkblue;
    margin-top: 50px;
    position: relative;
    width: 50%;
}

#header:before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    border: 20px solid #0D4585;
    border-top-left-radius: 20px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-right-width: 0;
    border-bottom-width: 0;
}

#header:after {
    content: '';
    position: absolute;
    top: -40px;
    left: 20px;
    width: 30%;
    border: 20px solid rgba(255, 255, 255, 0);
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: #0D4585;
    border-right-width: 100px;
    border-left-width: 0;
}

#header h3 {
    color: #fff;
    margin: 0;
}

<div id="header">
    <h3>Heading</h3>
</div>

Thank you so much, it was what I was looking for. Can I answer something? Is there somewhere a tutorial where explain all those tecniques in order to become able to create something like that by myself? — lisarko8077, Jan 07 '17 at 13:39
There's a lot of tutorial on css border triangle. Eg [like this one](https://css-tricks.com/snippets/css/css-triangle/). You can google it, it helps a lot if you give each border a different color instead of transparent. — slashsharp, Jan 07 '17 at 15:21

I can't retrieve a curved border effect with pure css

1 Answers1