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:
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:
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:
I've created a jsfiddle for you to test what I'm trying to achieve.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With