Home/ Questions/Q 8076931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:22:01+00:00

I’m trying to apply border-radius effect on a particular div. The code I used

  • 0

I’m trying to apply border-radius effect on a particular div. The code I used is this:

/* Multiple compatibility with border radius */
/* CSS 3 */
border-radius: 50%;
/* Firefox versiones 3.x */
-moz-border-radius: 50%;
/* Safari desde 3.2 hasta la 4 */
-webkit-border-radius: 50%;
/* Khtml Conqueror */
-khtml-border-radius: 50%;

And with that, I simulate a circle :D! Since there, everythig is ok. I wrote some lines so it fits for different resolutions, but today I discovered something when I used my father’s computer.

I use a 22 inch screen full HD. My father has a 17 inch screen. I tried my design on different resolutions on my 22 inch screen, and they were correct. But when I went to my 17 inch father’s monitor and I opened my site, my circles looked like an egg! I was guessing how could it be! I ensured my design with my 22 inches monitor, and with all of them, from 800 x 600 from 1920 x 1080, the design looked correctly.

Of course, I immediately thought it should be the monitor’s width. As I work with % for positioning my Web page, it makes the circles to look as eggs. But I’m not sure if changing this % would solve this problem and produce anothers one because I change that.

So, how can I make my circles look like circles in different screen inches??

Thank you!

EDIT:

Ok, I edit the post as it doesn’t clarify everything. My father’s resolution: 1024 x 768. I tried it on my 22 inches screen and it looks perfectly. But when I go to the 17 inches screen, they are eggs again! >_<

And here I paste the screenshot of the eggs:

The eggs!
Sorry, with toolbars and so…

I ensure they look as circles on a 22 inches screen…

EDIT

I changed both properties to 16%. Now it looks like this:

New eggs!

And now… I’m a bit lost. I think I might take a look to my code again…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Update

    I grabbed your website address from the image.

    You have the width and height of your boxes set as a percentage – this is a percentage of the containing element’s width and height, so you can recreate this issue just by resizing your browser into different aspect ratios.

    If the width is 16%, and you change the width of the browser, the circle will get wider but the height will be unchanged (you haven’t made the browser any higher).

    For example

    Height: 100px and Width: 100px

    • 16% of 100px is 16px wide
    • 8% of 100px is 8px wide

    Squash the browser to 100px high and 50px wide and you’ll get circles:

    • 16% of 50px is 8px wide
    • 8% of 100px is 8px high

    Previous Answer

    It could be that the screen resolution is wrong, which is causing the screen itself to be stretched.

    You can test this by viewing an image of a circle on the screen. If it is not round, the problem is in the computer settings not in your CSS.

    If the circle displays correctly are you able to point us to a demo of the page or supply a bit more of your HTML and CSS so we can test it out? Another cause of this would be that the size of your boxes is not “square” before you add the border-radius.

    Circle

    Circle courtesy of Wikipedia.

    • 0