title: Curved border with stroke in pure CSS?
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/Mgk3Z.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Mgk3Z.jpg" alt="Curved Border Using Images"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/TSDmC.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/TSDmC.jpg" alt="Curved Border Using CSS"></a></p>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="slider"&gt;
    &lt;div class="slide"&gt;
      &lt;!-- Content --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider {
    background: #21639e;
  }
  .slider .slide {
    background: url("image.jpg") no-repeat #21639e;
    border-radius: 100%/0 0 30px 30px;
  }
  </code></pre>
  
  <p>I did try adding <code>border-bottom: 5px solid #fff;</code> to the .slide class, but it ended up looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/X2aeu.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/X2aeu.jpg" alt="Curved Border Using CSS with Border"></a></p>
  
  <p>I've created a <a href="https://jsfiddle.net/kwda1u3y/1/" rel="noreferrer">jsfiddle</a> for you to test what I'm trying to achieve.</p>