Drawing a curved border-right in a box using CSS3 - image

Question

How can I draw a border-right in a box using CSS3 like in this image?

Answer 1

One possible solution would be this,
#curve{
margin:0 auto;
position:relative;
width:50px;
height:50px;
border-top:1px solid red;
border-right:1px solid red;
border-top-right-radius:50px;
float:left;
margin-left:50px;
}
#curve:after{
content: "";
position: absolute;
width: 50px;
height: 50px;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-bottom-left-radius: 50px;
left: 50px;
top: 50px;
}
<div id="curve"></div>

Answer 2

SVG is much better option to create such kind of shapes. It is simple and scale able.
We can use SVG's path element to create this shape and fill it with some color, gradient or pattern.
Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.
Below is the necessary code to create this shape:
<path d="M10,10
L210,10
Q230,10 250,50
T290,90
L10,90
Z" />
I've used 5 commands inside path element. Below is a brief description:
M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
L command is used to draw straight lines.
Q command is used to draw curves.
T produces the same type of curve as earlier, but if it follows another Q command or a T command.
Z command is used to close the current path.
Output:
Working Example:
body {
background: linear-gradient(#466273, #5c8ea8) no-repeat;
min-height: 100vh;
margin: 0;
}
<svg width="300" height="100" viewBox="0 0 300 100">
<path d="M10,10 L210, 10 Q230,10 250,50 T290,90 L10,90 Z" stroke="#000" stroke-width="2" fill="yellowgreen" />
</svg>
Useful Resources:
SVG: Specs, MDN