HEY GUYS!!
Today I will be telling you about my favourite ever CSS property: BORDER-RADIUS!!! 
Now, I know a lot of people on here are maybe not big border-radius fans given the old internet theme everyone is going for and all that, but I JUST CAN’T HELP MYSELF. I LOVE BORDER-RADIUS.
It makes all my corners so round! I love round corners! I don’t even mind that I have to put a separate scrollbar div inside all my divs because I love round corners so much!
Now, let’s get into the nitty gritty of border-radius: what units are best to use when declaring border-radius? This is exactly the topic I have decided to research for today’s blog post! 
The OG - px!
These units all create the standard perfectly symmetrical corner we all know and love from border radius! This can also be seen when using rem and em which we will discuss later. For now, let’s discuss how px are used to calculate measurements in CSS! 
In CSS, 1px is quite self explanatory: it is literally 1 pixel on your screen! While this is the easiest unit to understand, it is unfortunately not very reactive. 
This is because one pixel on your screen may be larger or smaller than 1 pixel on someone else’s screen, or 1 pixel may make up a smaller or larger proportion of your screen compared to someone else’s. So if possible, use more reactive units such as rem and em! While you may not personally see a difference while making your website, it may make a huge difference when switching between screen resolutions! 
If you were wondering how exactly pixels are used to calculate the curve of your corner, the number of pixels you specify in your CSS is the exact radius of the curve that is created! This means on a smaller screen the curve created may appear larger, and on larger screens, it may appear smaller 
My favourites - rem and em
As I hinted at above, these are my personal favourite units for both border-radius and creating reactive CSS layouts more generally! 
The curve is calculated in the same way as it is for pixels; the value you input is used to calculate the radius of the curve. The difference here lies in the way rem/em themselves are calculated!
Pixels are obviously an exact 1:1 representation of the pixels on the screen. So what are the other two?
Rem stands for root em, and is calculated by multiplying your given value by the root font size of the user’s browser. By default, this is 16px, so 1rem for most people will be 16px. However, if a user chooses to increase or decrease their text size in their browser, your website will scale appropriately! Using rem is a super easy way to make your website accessible to more users! 
Now, you might be wondering where the term em came from! It was originally used to describe the em quad, a spacer used in typesetting. This spacer was the width of a capital letter ‘M’. Nowadays, it represents the body size of a font. In the context of our lovely border-radius, this means that the size of your border-radius is your given em value multiplied by the font size of the current element rather than the root html font size as seen in rem above! This can be great if you want your element styling to scale and be larger when using a larger font size! 
For a quick recap:
- For pixels: radius = number of pixels
- For rem: radius = number of rem x root html font size
- For em: radius = number of em x font size of element
The Funkiest Units - Percent!
Every time I use percentages, my divs come out UGLY. Like literally SO FREAKIN FRICKEN UGLY. 
They do have one good usage though: making ovals and circles! 
The reason for this is that the horizontal curve is calculated using the width of the box, and the vertical curve with its height, as opposed to other methods which calculate a fixed radius for the corner’s curve. This also means that it caps at 50%, because past this point the two sides would curve inwards past the point of creating a circle and the points would no longer meet.
So pretty much, if you want to define a circle, define an equal width and height, then set the border radius to 50%!! If you want to define an oval, set different values for width and height but keep the border radius at 50%.
Example:
.example-class {
width: 100px;
height: 100px;
border-radius: 50%;
}It is also worth noting that it is possible to make both circles and ovals using the other units as well, it just requires a bit more thinking!
To create a circle, define an equal height and width, then define the border radius to be half of this size (this is where the 50% cap mentioned above comes from!!)
Example:
.example-class {
width: 100px;
height: 100px;
border-radius: 50px;
}To create an oval, its a tiny bit more complex. This time you will have to first define your chosen rectangle. You can then define separate values for the border-radius of the width and height, each set to half of the given sizes respectively. Define the horizontal radius first followed by the vertical radius.
Example:
.example-class {
width: 100px;
height: 50px;
border-radius: 50px / 25px;
} Conclusion
Ok folks, what have we learned today? 
First of all, most units take the value you have stated and use it to calculate the radius of the curve of your border. Secondly, percent is unique! It calculates two different curves for both the width and height of the circle and this can be very useful for creating circles and ovals without having to calculate a radius which is half of that of your given shape each time! I hope you learned something fun and this helps you with your future knowledge of CSS, whether you use border-radius a lot yourself, or just wanted to learn something new! 