Why I'm not getting a perfect circle around an item

Question

I'm trying to add some styling in <p-calendar> tag of primeng 6.1.1 . I want a blue circle on the month item on hover. I'm expecting this:

But instead, I'm getting this:

Why it is oval and not perfectly round. I'm using border-radius: 50% !important . Here is my datepicker.scss

.ui-monthpicker-month {
    border-radius: 50% !important;
    text-decoration: none;
    margin-top: 10px;
    color: #73767b;
    font-family: 'Muli', sans-serif;
    padding: 0px 20px 0 20px;
}

.ui-monthpicker-month:hover {
    background-color: #1474A4;
    color: white;
}

Please correct me.

Answer 1

That is because the element is not square. Check with chrome debugger what is the width and height and make sure that both match. My guess is that if you change padding: 0px 20px 0 20px ; to padding: 20px 20px 20px 20px; it will be square.

Answer 2

Try to specify in ui.monthpicker-month equal height and width then change border-radius: 100%

Answer 3

padding: 0px 20px 0 20px;

Try by removing padding, or if you want that padding then keep same padding for all 4 sides

Answer 4

Please try this one

width: 50px; height: 50px;

Answer 5

I'm terrible at styling but after making these changes in css:

.ui-monthpicker-month {
    border-radius: 100% !important;
    text-decoration: none;
    margin-top: 10px;
    color: #73767b;
    font-family: 'Muli', sans-serif;
    height: 50px !important;
    width: 50px !important;
    padding: 20px 20px 20px 20px;
}

I'm getting this:

but the month name is still somewhat pushed towards top, how to make this in exact mid position?

Answer 6

Try to remove margin-top: 10px; to margin-top: 0;