How to adjust the center of border-radius to the corner?

May 1, 2023

Please consider the following code:

.myClass {
  position: absolute;
  cursor: pointer;
  top: 50%;
  right: 50%;
  height: 100px;
  width: 300px;
  background-color: #729fcf;
  border-top-right-radius: 50px;
}

<span class="myClass"></span>

Here the center of the curve (of the border top right corner) is inside the span (which appears as a box).

I want the center of the curve to be at the corner ( the corner if there was no border-radius).

That is, I want the result to be like the picture below:

Is there any way I can do this?

A solution with pure CSS will be appreciated but if not possible, may be JavaScript also….

>Solution :

You can use CSS masks to achieve the desired result:

.myClass {
    position: absolute;
    cursor: pointer;
    top: 50%;
    right: 50%;
    height: 100px;
    width: 300px;
    background-color: #729fcf;
    mask-image: radial-gradient(circle at top right, transparent 0, transparent 20px, black 21px);
    mask-position: top right;
    mask-repeat: no-repeat;
    mask-size: 50% 50%;
    -webkit-mask-image: radial-gradient(circle at top right, transparent 0, transparent  20px, black 21px);
    -webkit-mask-position: top right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 50% 50%;
}