I need to place a border from an image to a semicircle but I can't get the image to be placed in the rounded shape controlling the number of appearances of the image. In a second instance I should be able to click on the image or some other mechanism to take me to another page.

My code:

.box {
  width: 500px;
  height: 250px;
  background-color: coral;
  border: 10px solid burlywood;
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  border-image-source: url("punto1.png");
} 

<div class="box"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Image:

CodePudding user response：

If you want the image to appear inside the semicircle, you want to use background-image instead of border-image-source.

To make the entire thing into a link, use an <a> tag. Like this:

<a href="/example/page/">
    <div class="box"></div>
</a>

CodePudding user response：

If you put the image as a background instead of as a border you will see it (partially) in the semi circle. This snippet positions and sizes the image so the semi circle is filled.

It also puts the whole thing into an anchor element so it is clickable.

.box {
  width: 500px;
  height: 250px;
  background-color: coral;
  border: 10px solid burlywood;
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  background-image: url(https://picsum.photos/id/1015/300/200);
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  background-position: center center;
} 

<a href="#"><div class="box"></div></a>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

.box {
  width: 500px;
  height: 250px;
  background-color: coral;
  border: 10px solid burlywood;
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  border-image-source: url("punto1.png");
} 

<div class="box"></div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note: You could make your snippet more responsive if required by using relative units such as %s rather than fixed units such as px.