CODEWITHSUNDEEP
htmlcsscss-mask
alexandernst
alexandernst

Reputation: 15089

Adding a border to a mask image created with a radial gradient

I have a transparent radial gradient that I'm using as a mask image in order to "cut a hole with the shape of a half circle" in a div.

I'm using a transparent radial gradient because I want the "hole" to be an actual "hole" (meaning, I want to be able to see the content that is "behind" the div).

Demo:

div {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 2px solid black;
  
  -webkit-mask-image: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  );
}
<div>

</div>

How can I add a border (let's "2px solid black") to the half-circle shape?

Upvotes: 0

Views: 1020

Answers (1)

Temani Afif
Temani Afif

Reputation: 272999

add a gradient coloration using the same radial-gradient:

div {
  width: 200px;
  height: 200px;
  background: 
     radial-gradient(
      circle at center top,
      transparent 30px,
      black 30px 32px,
      green 33px
    ) border-box;
  border: 2px solid black;
  
  -webkit-mask-image: radial-gradient(
    circle at center top,
    transparent 30px,
    black 31px
  );
}
<div>

</div>

Upvotes: 1

Related Questions