Custom rounded shape image using CSS

Question

I want to get a custom-shape image as shown here:

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

<img id="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg">

DEMO

Any thoughts if this is even possible?

what do you mean "is this even possible"? Didn't you just do it? What about the DEMO you linked to isn't doing what you want? — Paul L
– Paul L, Commented Jun 1, 2016 at 20:55
No. The shape isn't right. The image has more curve towards the top. — Elaine Byene
– Elaine Byene, Commented Jun 1, 2016 at 20:57
Your question asks for an oval shape. The demo creates an oval shape. The image in the question is not an oval shape. I don't know what shape that is, but it's not an oval. So you're saying you want to modify the demo to create the shape in the image in the question? I suggest you rephrase your question to remove the confusion. — Paul L
– Paul L, Commented Jun 1, 2016 at 20:59
Do you know that the image you are showing as what you want is even using CSS to do this? — Matt Runion
– Matt Runion, Commented Jun 1, 2016 at 20:59
I don't know how to frame the question to sound it like I want. To answer mrunion, the design is made in photoshop. If it's done in css, i would copy-paste the code and won't be asking here! — Elaine Byene
– Elaine Byene, Commented Jun 1, 2016 at 21:00

DaniP · Accepted Answer · 2016-06-01 21:26:05Z

4

There is one way you can "fake" this shape with border:

body {
  background: purple;
}
#oval-shape {
  display:block;
  margin: 20px auto;
  width: 200px;
  height: 200px;
  background: none;
  border-radius: 100%;
  box-sizing: border-box;
  border-bottom: 50px solid transparent;
}

<img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape">

edited Jun 1, 2016 at 21:26

answered Jun 1, 2016 at 21:11

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Elaine Byene Over a year ago

Interesting. I used a transparent background and got it the way I want. I'm still trying to figure out how you manage to pull this off. Thank you so much :)

DaniP Over a year ago

@ElaineByene oh ! Thanks for point that ... I haven't tried the transparent bg just works :) .. the warning is wrong XD

Elaine Byene Over a year ago

After testing with another image (square), I realize this method distorts the original image :(

DaniP Over a year ago

@ElaineByene that is for the fixed values on height and width ... maybe. Post it on a fiddle maybe I can help u; you can also use the img's as background and cover on divs.

Ian Selby · Accepted Answer · 2016-06-01 21:01:42Z

3

Use the below border properties and adjust as per your needs. More number means more towards circle. Hope it helps

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  border-top-left-radius:150px;
  border-top-right-radius:150px;
  border-bottom-left-radius:80px;
  border-bottom-right-radius:80px;
}

edited Jun 1, 2016 at 21:01

Ian Selby

3,2411 gold badge27 silver badges18 bronze badges

answered Jun 1, 2016 at 20:59

sam

1372 silver badges10 bronze badges

3 Comments

Elaine Byene Over a year ago

Thanks but that's far from what I want. Please check the screenshot again.

AndrewL64 Over a year ago

@ElaineByene That gives you an answer regarding the right way to make custom-shape images using css. You will have to experiment with the property values px/% yourself in order to find the shape closest to what you want. +1

Elaine Byene Over a year ago

No! I already had that and have played with it for hours before posting here.

web-tiki · Accepted Answer · 2016-06-02 13:13:15Z

2

Alternative approach with an inline svg. The following example uses 2 cubic bezier curves to make the desired shape and the pattern element to fill the shape with the image:

svg{width:30%;height:auto;}

<svg viewbox="0 0 10 8">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="20" height="10">
      <image xlink:href="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" x="-1" y="0" width="14" height="7" />
    </pattern>
  </defs>
  <path fill="url(#img)" d="M0.7 5 C1 -0.8 9 -0.8 9.3 5 C9.3 7.5 0.7 7.5 0.7 5"/>
</svg>

edited Jun 2, 2016 at 13:13

answered Jun 2, 2016 at 8:02

web-tiki

104k33 gold badges226 silver badges258 bronze badges

2 Comments

DaniP Over a year ago

Pretty nice solution ... Seems like you really know about SVG. Can you guide me where to start with that?

web-tiki Over a year ago

@DaniP I would suggest to start here. If you want to chat about it or have questions, you can come to this chatroom, people will help if they can.

hakJav · Accepted Answer · 2016-06-05 00:03:31Z

2

You can indeed get that exact shape with no straight edges: http://jsfiddle.net/XDLVx/339/

#oval-shape {
    width: 200px;
    height: 100px;
    border-radius: 100px / 70px 70px 30px 30px;
}

More info: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

edited Jun 5, 2016 at 0:03

answered Jun 1, 2016 at 21:25

hakJav

3011 silver badge5 bronze badges

Comments

Paulie_D · Accepted Answer · 2016-06-01 21:03:00Z

0

Sure...here you go. Adjust as required.

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 50px;
}

<img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape">

answered Jun 1, 2016 at 21:03

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

1 Comment

Elaine Byene Over a year ago

No. This isn't what I'm looking for. Also, I have been trying to adjust as required/shown in the screenshot here. The adjustment is what is making me go nuts.

Dillon Burnett · Accepted Answer · 2016-06-02 06:00:21Z

0

Option 1

#ovalshape{
    -webkit-clip-path: polygon(51% 27%, 71% 36%, 91% 53%, 89% 68%, 76% 78%, 49% 85%, 16% 78%, 8% 65%, 15% 46%, 33% 33%);
    clip-path: polygon(51% 27%, 71% 36%, 91% 53%, 89% 68%, 76% 78%, 49% 85%, 16% 78%, 8% 65%, 15% 46%, 33% 33%);
}

Option 2: Take the image you want and cut out the inside and make transparent.

 <div style="height: 100; width: 100; overflow: hidden; background-image: url'picture.jpg';>
     <img src="cutout.png" style="height: 100%; width: 100%;">
 </div>

edited Jun 2, 2016 at 6:00

answered Jun 2, 2016 at 5:53

Dillon Burnett

5034 silver badges11 bronze badges

3 Comments

Elaine Byene Over a year ago

I don't understand your code. what is src="cutout"? and what is clip-path?

Dillon Burnett Over a year ago

on that image you posted, at the person and cut them out and make it transparent. then save the image as cutout.png and use that for the source. Clip-path has nothing to do with option two, they are do different options.

Elaine Byene Over a year ago

cutting out is out of question since it will be a dynamic image in JPG format. Can you give a demo of that clip-path? I fail to understand the code.

Dharmesh · Accepted Answer · 2016-06-02 10:43:53Z

0

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

<img id="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg">

answered Jun 2, 2016 at 10:43

Dharmesh

852 silver badges8 bronze badges

1 Comment

Harry Over a year ago

What's the point of this answer? Isn't it same as the code in question?

G-Cyrillus · Accepted Answer · 2016-06-02 18:40:47Z

0

as others answers , border-radius can do it:

demo below, with both image on top of each others and side by side:

img {
  border-radius:200px 200px 180px 180px / 190px 190px  80px 80px;
  vertical-align:middle;
}
div img {
  opacity:0.5
}
div {
  background:url(https://i.sstatic.net/C8nGL.png);
  display:inline-block;
  padding:12px;
}
.dem {
  margin:15px;
  box-shadow:0 0 0 10px white;
  }
body {
  background:#333;
  }

<div>
  <img src="http://lorempixel.com/140/100/people/9" />
</div>
<img src="http://lorempixel.com/140/100/people/9" class="dem"/>
<img src="https://i.sstatic.net/C8nGL.png" />

answered Jun 2, 2016 at 18:40

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Comments

G-Cyrillus · Accepted Answer · 2016-06-24 13:11:20Z

0

#oval-shape {
    width: 18%;
    height: 209px; 
    background: blue; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 50%/* border-radius: 100px / 50px; */
    border-radius: 50%;

}

try with different height and width according to you shape. I think this will work

edited Jun 24, 2016 at 13:11

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

answered Jun 2, 2016 at 10:47

Dharmesh

852 silver badges8 bronze badges

3 Comments

G-Cyrillus Over a year ago

you should delete this answer

Dharmesh Over a year ago

@GCyrillus Can u suggest me please y should i delete this answer and what is the best way to answer?

G-Cyrillus Over a year ago

You should indent the code you put in answser (for readability) and explain a little what it is about, so answer has some value. As it is , you have been lucky that no one downvoted it :) I just edited your answer for the code part, and you can notice easy what it is about and that there is something wrong with the syntaxe .. last 2 lines won't be of any use ;)

Collectives™ on Stack Overflow

Custom rounded shape image using CSS

9 Answers 9

4 Comments

3 Comments

2 Comments

Comments

1 Comment

3 Comments

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

3 Comments

2 Comments

Comments

1 Comment

3 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related