I’m using the :after element so don’t need a div for the circle. The technique is basically the same except yours has hard coded numbers for the sizes etc…
You have to hide it with the background color on the button and on the half circle as in my example. You already had a background-color on the button anyway so I assumed it wasn’t an issue.
If you want the button transparent then you’d need to use 2 more pseudo elements for the left and right lines instead of the border on the wrapper.
Like this:
I just added a gradient to the body so you could see its working.
The element is only 57px wide so can’t have a border radius of 57px. The maximum is 57px / 2 but as half pixels aren’t really a think anything above 29px will be the same as it can’t be bigger than half its width if both sides have the border-radius applied. I just 30px as that was the height but really the radius should be 29px (or 28.5px except that may get rounded down to 28px and be a pixel out).
The element is only 57px wide so can’t have a border radius of 57px. The maximum is 57px / 2 but as half pixels aren’t really a think anything above 29px will be the same as it can’t be bigger than half its width if both sides have the border-radius applied. I just used 30px as that was the height but really the radius should be 29px (or 28.5px except that may get rounded down to 28px and be a pixel out).
All of the code snippets you provided will create a half-circle, but they will look slightly different because of the different height and border-radius values.
The border-radius property defines the radius of the circle, and the height property defines the height of the half-circle. If you want a perfect half-circle, the height should be half of the width, and the border-radius should be the same as the width.
So, the best way to create a perfect half-circle would be:
.exitE:after {
content: "";
position: absolute;
z-index: -1;
left: -11px;
top: -11px;
width: 57px;
height: 28.5px; /* half of the width */
border: 1px solid blue;
border-bottom: transparent;
border-radius: 57px 57px 0 0; /* same as the width */
pointer-events: none;
}
This will create a half-circle with a diameter of 57px. The border-radius of 57px 57px 0 0 makes a half-circle on the top. The border-bottom: transparent makes the bottom half of the circle invisible. The height: 28.5px is half of the width, which ensures the element is a perfect half-circle.
AI is saying to use this: border-radius of 57px 57px 0 0
From Copilot:
You’re correct in your understanding. The border-radius property in CSS defines the radius of the circle, and for a perfect circle, the border-radius should be half of the width of the element.
However, when creating a half-circle, the border-radius can be the same as the width of the element. This is because the border-radius is applied to each corner of the element, and in the case of a half-circle, the bottom corners have no effect as the bottom border is transparent.
So, if the width of the element is 57px, a border-radius of 57px 57px 0 0 will create a perfect half-circle on the top. The height should still be half of the width to ensure the element is a perfect half-circle.