Make an ellipse or oval to a circle

HTML & CSS
1

I have a web page at http://dot.kr/qna/layout/221107outerCircle/

There are two circles on the menu button at the top right.
The background color of the inner circle is black and the background color of the outer circle is yellow.

The outer circle looks actually an ellipse or oval rather than a circle.

Can I make it a circle with your help?

2

It’s an oval because it’s taller than it is wide. The quick and dirty way would be to set the height and weight of the button to the same siize and it should give you the shape you want.

I would recommend changing border-radius to 50% instead of using a pixel value because otherwise you’re going to be tweaking that pixel value as you tweak the height/width to your liking.

1 Like
3

Maybe something like this:

.button,
.button-footer {
  pointer-events: initial;
  cursor: pointer;
  -wbekit-appearance: none;
  appearance: none;
  margin: 0;
  border-radius: 30px;
  padding: 0.2px;
  border: 1px solid #000;
  background: #ffff00;
  transition: 0.3s ease;
} 
/* additional code below*/
.top .button{
width:34px;
height:34px;
padding:0;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
line-height:1.1;
}
4

Maybe something like this:

.button{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
border: 8px solid yellow;
outline: 1px solid black;
cursor: pointer;
transition: 0.3s ease;
}

. . . and delete the black circle from the HTML.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.