Curved border with a stroke in pure CSS?

Question

I am wondering if it is possible to achieve a curved border (with a bump) using only CSS? At the moment I am creating curved borders for the title of my site using images:

I would like to change this to a CSS solution so that I don’t have to change the images when the amount of content as part of the changes - I need them to be dynamic and responsive, I was able to draw a curve using radius borders:

This works much better for me, but I wonder if it is possible to add a stroke to it so that it looks more like a representation of an image? Any help is appreciated. Here is the code I wrote for 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 tried adding border-bottom: 5px solid #fff; to the .slide class, but it looked like this:

I created jsfiddle to check what I'm trying to achieve.

Answer 1

Yes, you can try using shadow shadows to create such a border. Applying the shadow of a white box on the outside of an element will make it look like a stroke / border.

This is border-bottom: 5px solid #fff; produces a different kind of effect, because we apply only the lower border to the element. The borders on the left and right do not exist ( zero width ), and therefore the line decreases as you approach 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 Fiddle .

---

For a more graceful curve, you can also try the approach below. It uses a pseudo-element that is wider than .slide , and then centers the image inside it. (I feel this approach makes it 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>