Search code examples
cssbordercss-shapes

Curved border with stroke in pure CSS?

I'm wondering if it is at all possible to achieve a curved border (with a stroke) using only CSS? At the moment I'm creating curved borders for the header of my website using images:

Curved Border Using Images

I'd like to change this to a CSS solution so that I'm not having to alter images when the amount of content within changes - I need these to be dynamic and responsive, I've managed to draw a curve using border-radius:

Curved Border Using CSS

This works much better for me, but I'm wondering if it is possible to add a stroke to it to make it look a more like the image representation? Any help is greatly appreciated. Here's the code I've written to achieve this:

<div class="slider">
  <div class="slide">
    <!-- Content -->
  </div>
</div>

CSS:

.slider {
  background: #21639e;
}
.slider .slide {
  background: url("image.jpg") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
}

I did try adding border-bottom: 5px solid #fff; to the .slide class, but it ended up looking like this:

Curved Border Using CSS with Border

I've created a jsfiddle for you to test what I'm trying to achieve.

Solution

  • 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>

    Below is an updated version of your Fiddle.

    For a more graceful looking curve then you can also try the below approach. It uses a pseudo element which is wider than the .slide and then centers the image within it. (I feel that this approach makes it look closer to the original image but the choice is yours)

    .slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.slider .slide:before {
  position: absolute;
  content: '';
  left: -2%;
  top: -6px;
  width: 104%;
  height: 100%;
  background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}
    <div class="slider">
  <div class="slide">
    Some content
  </div>
</div>