Curved Border with Stroke in Pure CSS

Curved border with stroke in pure CSS?

Yes, you can try and use box shadows to create this kind of border. Applying a white box shadow on the outer side of the element will make it look like a stroke/border.

This - border-bottom: 5px solid #fff; produces a different kind of effect because we are applying only the bottom border to the element. The borders on the left and right are non existent (zero width) and so the line thins out as you go nearer to the edges.

.slider {  height: 500px;  background: #21639e;}.slider .slide {  height: 200px;    background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;  border-radius: 100%/0 0 30px 30px;  box-shadow: 0px 6px 0px white;}

<div class="slider">  <div class="slide">    Some content  </div></div>

Curved header with pure CSS

You can do this in many ways, one such thing is using border-radius. So, for the shape you just need to have a border-bottom-left-radius: and border-bottom-right-radius:.

Here I have attached the code,

body{  background-color:#f3f2f4;}.header{  width:105%;  height:40%;  left:-3%;  position:absolute;  background-image: linear-gradient(#8459f9, #4c3196);  border-top-left-radius:10px;  border-top-right-radius:10px;  border-bottom-left-radius: 50% 20%;  border-bottom-right-radius: 50% 20%;}.container{  width:60vw;  height:80vh;  background-color:white;  border-radius:10px;  position:absolute;  top:50%;  overflow:hidden;  left:50%;  transform:translate(-50%,-50%);}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>  <div class="container">  <div class="header">    </div>    </div></body></html>

Curved header with pure CSS

You can do this in many ways, one such thing is using border-radius. So, for the shape you just need to have a border-bottom-left-radius: and border-bottom-right-radius:.

Here I have attached the code,

body{  background-color:#f3f2f4;}.header{  width:105%;  height:40%;  left:-3%;  position:absolute;  background-image: linear-gradient(#8459f9, #4c3196);  border-top-left-radius:10px;  border-top-right-radius:10px;  border-bottom-left-radius: 50% 20%;  border-bottom-right-radius: 50% 20%;}.container{  width:60vw;  height:80vh;  background-color:white;  border-radius:10px;  position:absolute;  top:50%;  overflow:hidden;  left:50%;  transform:translate(-50%,-50%);}

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body>  <div class="container">  <div class="header">    </div>    </div></body></html>

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

Slightly curved bottom div in css

You could do that using CSS clip-path!

For example, create a "spacer" div below the actual div with a clip-path property like that clip-path: ellipse(50% 9% at 50% 50%);. This will create an elliptic path from the div. Overlapp the top-half of this div with your original one and - tada - you have a rounded bottom.

Try this tool to experiment a little bit with clip-path or see the MDN Page

Square with rounded corners and indented curved border

Considering the hassle and amount of code needed to align double curves with CSS, SVG seems way more appropriate. A few other reasons to go for svg here are :

control of the path (color, width, curve...)
control the fill with a plain color, gradient or image
less code
you can display it over a non plain background (gradient or image)
maintain the boundaries of the shape for user interactions (hover, click...)

Here is a basic example using an inline svg with a path element.

The curves are drawn with Cubic Bezier curves :

svg{width:30%;}

<svg viewbox="0 0 10 10">  <path d="M1.5 0.5 Q5 1 8.5 0.5 Q9.5 0.5 9.5 1.5 Q9 5 9.5 8.5 Q9.5 9.5 8.5 9.5 Q5 9 1.5 9.5 Q0.5 9.5 0.5 8.5 Q1 5 0.5 1.5 Q0.5 0.5 1.5 0.5z"         fill="none" stroke-width="0.2" stroke="#8A6FF2" /></svg>

Pure CSS gradient circle border

SVG is the recommended way to create a circle shape and draw gradient outline / border around it.

SVG has a circle element that can be used to draw a circle shape. This shape can be filled and outlined with a solid color, gradient or pattern.

* {box-sizing: border-box;}
body {  background: linear-gradient(#333, #999);  text-align: center;  min-height: 100vh;  padding-top: 10px;  margin: 0;}svg {vertical-align: top;}

<svg width="210" height="210">  <defs>    <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0">      <stop offset="0" stop-color="#f5d700" />      <stop offset="1" stop-color="#0065da" />    </linearGradient>    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient>  </defs>  <g fill="none">    <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" />    <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" />  </g></svg>

How to achieve chamfered CSS Border Corners rather than rounded corners?

Here's a way, although it does have some shortcomings, like no borders and it isn't transparent:

.left,.right {  width: 100px;  height: 100px;  float: left;  position: relative;}
.left {  background: lightpink;}
.right {  background: lightblue;}
.right::after,.left::after {  width: 0px;  height: 0px;  background: #fff;  content: '';  position: absolute;  bottom: 0;}
.right::after {  left: 0;  border-top: 10px solid lightblue;  border-right: 10px solid lightblue;  border-left: 10px solid white;  border-bottom: 10px solid white;}
.left::after {  right: 0;  border-top: 10px solid lightpink;  border-right: 10px solid white;  border-left: 10px solid lightpink;  border-bottom: 10px solid white;}

<div class="left"></div><div class="right"></div>

Wavy shape with css

I'm not sure it's your shape but it's close - you can play with the values:

https://jsfiddle.net/7fjSc/9/

#wave {  position: relative;  height: 70px;  width: 600px;  background: #e0efe3;}#wave:before {  content: "";  display: block;  position: absolute;  border-radius: 100% 50%;  width: 340px;  height: 80px;  background-color: white;  right: -5px;  top: 40px;}#wave:after {  content: "";  display: block;  position: absolute;  border-radius: 100% 50%;  width: 300px;  height: 70px;  background-color: #e0efe3;  left: 0;  top: 27px;}

<div id="wave"></div>

Curved Border with Stroke in Pure CSS