Creating circular border

HTML-CSS
1

Hey guys,

i have a quick question and i hope you can help me with that.

Why does this code:

img {
      max-width: 70%;
      padding: 10px;
      margin:10px;
      border: solid;
      border-color: transparent;
      border-radius: 50%;
  }

does not create a circular border but a oval one?

2

Hi @d0sch1, welcome on the forum.
How is your image? A square or rectangle?

3

Hey @simonebogni
thank you for welcoming me. :slight_smile:

My picture is a rectangle.

4

Because it is dynamic. You need to declare the width and height you want. I wouldn’t recommend doing this on the img itself. You should create a parent element that you want to place the image in so you can control the width and height. Then set overflow to hidden. When you place the image in the element, It will “appear” as a circle.

The image that you are trying to turn into a circle is likely a rectangle, and the radius is just impacting the filleting of the corners.

1 Like
5

Hey @Ottomaddix,

thank you so much that makes a lot of sense!

6

TL;DR Squares make circles. Rectangles make ovals.

Choices: crop photo to square or follow @Ottomaddix advice. His way you can pick which portion you want in the circle. Also possible to use the same photo twice in a page two different ways.

1 Like
7

Hey @tlc35us,

ah ok that is also something i did not take into account thank you very much!