Difference from px and % - CSS Question

Hi coders,
I wanted to ask the difference between px and% for border radius or in general, because while I was doing the CSS module I wanted to understand better.
I saw in these modules:

  • Basic CSS: Add Rounded Corners with border-radiusPassed
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 10px; //rectangular border
  }
  • Make Circular Images with a border-radius
.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%; //  circular border
  }

A pixel is a unit of measurement, so 10px is always going to be based on a circle with a radius of 10 pixels. The alternative is to set a radius based on the size of the element that being affected. Using 50% will turn a square into a circle because the radius of the borders is 1/2 the length of the square’s edges.

1 Like

border-radius in % is a scary beast and should be avoided because it splits radius into vertical and horizontal parts and applies percentage according to height and width of the element. So you’ll have equally rounded radius only if height and widths are same.

1 Like

To better understand the difference there are resources that also have examples because I didn’t find them

Great question!

px is a “fixed” unit of measure - it’s unit size is based on the actual number of pixels on device screen and will always occupy that many pixels regardless of its parent tag’s size.

% are known as “relative” units - they auto-resize according to their “parent tag’s” unit size.