CODEWITHSUNDEEP
htmlcsscss-shapesrounded-corners
Kashif Latif
Kashif Latif

Reputation: 677

How to create a rounded rectangle shape Css?

I'm trying to design a profile image shape just like this

correct image design

but my code given me the following design

my design

I'm worried about the white space inside the border and the shape here is code

.doctor-profile-photo {
  width: 210px;
  height: 210px;
  border-radius: 60px/140px;
  border: 5px solid #000;
  box-shadow: 0px 2px 5px #ccc;
}
.doctor-profile-photo img {
  width: 100%;
  height: 100%;
  border-radius: 60px/140px;
}
<div class="doctor-profile-photo">
  <img src="http://weknowyourdreams.com/images/bird/bird-09.jpg" alt="">
</div>

Upvotes: 5

Views: 2988

Answers (2)

Persijn
Persijn

Reputation: 14990

SVg path and pattern

You can create your shape with a single path. I used a quadratic Bezier curve.
Path MDN

I added an image to the svg using a image tag and pattern tag.
This is then using inside the path with this fill="url(#img1)".
The defs tag is used to hide elements we are not using directly. 

<svg viewBox="0 0 100 100" width="400px" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="400">
      <image xlink:href="http://lorempixel.com/400/400/" x="0" y="0" width="100px" height="100px" />
    </pattern>

  </defs>
  <path d="M15,15 Q 50,0 85,18 100,50 85,85 50,100 18,85 0,50 15,15Z" fill="url(#img1)" />
</svg>

Upvotes: 1

Nijraj Gelani
Nijraj Gelani

Reputation: 1466

This gives pretty similar output to what you want. Try tweaking the values of border-radius and height-width to achieve exactly what you want.

<style>
 #pic { 
    position: relative;     
    width: 130px; 
    height: 150px; 
    margin: 20px 0; 
    background: red; 
    border-radius: 50% / 10%; 
    color: white; 
    text-align: center; 
    text-indent: .1em;
 } 
 #pic:before { 
    content: ''; 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    right: -5%; 
    left: -5%; 
    background: inherit; 
    border-radius: 5% / 50%; 
 } 
</style>
<div id="pic"></div>

Here's a useful link : https://css-tricks.com/examples/ShapesOfCSS/

Upvotes: 4

Related Questions