A lot of beginner developers don’t know how to round corners in their elements.
The solution is a lot simple than they can think about. To define corner radius in CSS you can use border-radius property. You can do this in several ways. One of them is static, equal radius on each corner.
For example, if you want to do 10px radius in all corners, you should just do it using following code:
To define individual radius for each corner you can enter 4 values (top-left, top-right, bottom-right, bottom-left).
border-radius: 10px 20px 30px 40px;
It’s also possible to put there 3 values, but it’s probably the least used way. First value allows to define radius of top-left, second of top-right and bottom-left, and third of bottom-right corner.
border-radius: 10px 50px 30px;
Two values – the first one determines top-left and bottom-right corners, and the second top-right and bottom-left.
border-radius: 20px 40px;
That’s the few of simplest way to define border radius in css. Remember that you can also use em, or % values instead of px, we will describe these methods later in upcoming articles.