I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"
In "CSS Quickies" I will explain one CSS property in deep. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments. I answer all questions.
I'm also live streaming while coding on twitch.tv. If you want to talk to me directly!
Let's talk about border-radius.
The short answer is: you can give HTML elements round corners, and you can only see this if the background has a different color then the HTML Element or if the HTML element has a border color.
The most basic syntax is:
Now that you know what a radius is. Imagine that you cut out the corner along the edges of the circle of your HTML element! That's it! Just a Circle where someone cuts along with scissors.
There are different ways how you can use it.
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 10px;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 10px 10px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 10px 10px 10px;
You see that we can set every corner what give is good flexability to create fancy websites.
You can use px, em and % values.
There is also an advanced use of
border-radius where you can define a second radius. Think about it like you would have now two circles for every corner! And you can set them independent.
border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
/* you can read this like this: */
top-left-up top-right-up bottom-right-down bottom left-down /
top-left-left top-right-right bottom-right-right bottom-left-left
Here are some examples:
Border-radius is also used to create round elements.
That's it! There is not more to learn about
This is straightforward; you have to have an element that has the same
height and set
border-radius to 50%.
This is a new format I'm trying out.
How do you like it?
What did you miss?
Please comment down below!
Thanks for reading!