Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 860
Liam McArthur Avatar asked Jan 12 '17 09:01

Liam McArthur


People also ask

How do you curve the bottom border in CSS?

CSS Syntaxborder-bottom-left-radius: length|% [length|%]|initial|inherit; Note: If you set two values, the first one is for the bottom border, and the second one for the left border. If the second value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.

How do you put a border radius on a border image in CSS?

CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.

Which CSS property is used for rounded border corners?

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.


1 Answers

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>
like image 91
Harry Avatar answered Oct 31 '22 08:10

Harry