Is it possible to achieve a curved circle shape using border-radius?

user_11563286 0
Viewed 74

I am not sure what the shape is. I am assuming it's a curved circle. Below is a screenshot of the example.

enter image description here

I want an image to be shaped somewhat like this. But trying with border-radius isn't working at all. Is there any way to achieve this shape with CSS?

css html
2 Answers

Here is your Answer and you can achieve it by border-radius if you want to customize it here is the link https://9elements.github.io/fancy-border-radius/#34.28.22.33--.

.border{
  height:250px;
  width:250px;
  border:2px solid black;
  border-radius:28% 72% 67% 33% / 34% 22% 78% 66%;
  background:yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="border"></div>
</body>
</html>

user_149769450

I don't think you can do it easily with css.

I tried with vertical/horizontal shapes, but it's a bit tricky and not that nice...

You could use svg shapes : you juste have to draw your shape, and add you image inside this shape like that

<svg>
  <defs>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
  <image height="1" width="1" preserveAspectRatio="none"
    xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" />
</pattern>
  </defs>
  <polygon style="stroke: #999DA3;" fill="url(#pattern1)" points="50 1 95 25 95 75 50 99 5 75 5 25" />
</svg>

user_46167220
Related