CODEWITHSUNDEEP
htmlcss
Rohit Sharma
Rohit Sharma

Reputation: 3334

How to give border radius to make an element look like this image?

I am trying to make .main-div like this image

enter image description here

.main-div {
  width: 100px;
  height: 100px;
  background-color: Red;
  border-radius: 30px/20px;
}
<div class="main-div"></div>

My JSFiddle is here.

Upvotes: 1

Views: 1462

Answers (5)

Asons
Asons

Reputation: 87191

You can do a trick using a pseudo element and achieve that shape

body {
  background: lightgray;
}

.main-div {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 100px;
  background-color: red;
  border-radius: 30%/50%;
  background: url(https://i.sstatic.net/CWoXa.png) center center no-repeat;
  background-size: 110px 110px;
}

.main-div::after {
  content: '';
  position: absolute;
  left: 5px;
  top: -5px;
  width: 100px;
  height: 110px;
  background: inherit;
  background-size: inherit;
  border-radius: 50%/30%;
}

.main-div+.main-div {
  background: gray;
}
<div class="main-div"></div>
<div class="main-div"></div>

Upvotes: 3

Durgesh Dangi
Durgesh Dangi

Reputation: 213

.element {
  border-radius: 50px;
  overflow: hidden;
}
<a href="https://imgbb.com/"><img src="https://image.ibb.co/irvmO5/html5.png" alt="html5" border="0" class="element"></a><br /><a target='_blank' href='https://imgbb.com/'>Rounded rectangle clip mask</a>

Upvotes: -1

Akash Singhal
Akash Singhal

Reputation: 9

Add this style. You can change border-radius as per your requirements:

div {
  border: 2px solid #a1a1a1;
  padding: 10px 15px; `enter code here`
  background: #dddddd;
  width: 100px;
  border-radius: 55px;
}

Upvotes: 0

Just a student
Just a student

Reputation: 11020

As Justinas remarked in their answer, the border of your example image does not look like it can be recreated with border-radius alone. This is because the outline is not an ellipse.

It is possible to do this, with good browser support, using SVG as follows.

/* set size of and center SVG */
svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="outline">
      <!-- use Bezier curves to define outline -->
      <path d="M 0 100
               C 0 0, 40 0, 100 0
               C 160 0, 200 0, 200 100
               C 200 200, 160 200, 100 200
               C 40 200, 0 200, 0 100
               Z" />
    </clipPath>
  </defs>

  <image x="0" y="0" width="200" height="200"
     xlink:href="https://placehold.it/200"
     clip-path="url(#outline)" />
</svg>

This uses clipping in SVG with the clipPath element. You can define any path to use for the clipping. I have used four Bezier curves here. You can tweak where the control points are, or change this to use something entirely different if you wish.

An extra bonus of this approach is that it is now easy to apply other (advanced) filters, for example blurring the image or applying a drop shadow.

/* set size of and center SVG */
svg {
  display: block;
  width: 204px;
  height: 204px;
  margin: 0 auto;
}
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="outline">
      <!-- use Bezier curves to define outline -->
      <path d="M 0 100
               C 0 0, 40 0, 100 0
               C 160 0, 200 0, 200 100
               C 200 200, 160 200, 100 200
               C 40 200, 0 200, 0 100
               Z" />
    </clipPath>
    <filter id="dropshadow" x="-30%" y="-30%"
            width="160%" height="160%"
            color-interpolation-filters="sRGB">
      <!-- define color of shadow here -->
      <feComponentTransfer in="SourceAlpha">
        <feFuncR type="linear" slope="0"
                 intercept="0.518"></feFuncR>
        <feFuncG type="linear" slope="0"
                 intercept="0.698"></feFuncG>
        <feFuncB type="linear" slope="0"
                 intercept="0.867"></feFuncB>
      </feComponentTransfer>
      <!-- define blur of shadow here -->
      <feGaussianBlur stdDeviation="2" />
      <!-- we can offset the shadow -->
      <feOffset result="shadow" dx="1" dy="1" />
      <!-- put shadow below original content -->
      <feBlend in="SourceGraphic"
               in2="shadow" mode="normal" />
    </filter>
  </defs>

  <g transform="translate(2, 2)"
     filter="url(#dropshadow)">
    <image x="0" y="0" width="200" height="200"
      xlink:href="https://placehold.it/200"
      clip-path="url(#outline)" />
   </g>
</svg>

Upvotes: 2

Justinas
Justinas

Reputation: 43441

Your image radius does not look like standard CSS border radius. If yes, than you need to use image preprocessing (in back-end side, e.g. GD or stand-alone tool like Photoshop) or use Clipping Mask with limited support. Using border radius you can have similar effect.

.main-div {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 40%;
    overflow: hidden;
    position: relative;
}

.main-div img {
  width: 100%;
  position: absolute;
  left: -50px;
  top: -50px;
  margin-top: 50%;
  margin-left: 50%;
}
<div class="main-div">
  <img src="http://lorempixel.com/200/200/"/>
</div>

Upvotes: 1

Related Questions