The border-radius Property in CSS

In CSS, we can make a border rounded by using the border-radius property. This property defines the radius of the element's corners. The higher the border-radius value, the rounder the corners will be.

For example, let's say we have a div element, and we want to make its border rounded. In the CSS styling, we would write:

div {
   border: 2px solid black;
   border-radius: 10px;
}

In this example, the div's border becomes rounded with a radius of 10 pixels. If we increase the value of the border-radius, the corners will become more rounded.

The border-radius property accepts values in pixels (px), em (em), percentage (%), etc. When a percentage value is used, it is relative to the width and height of the element. This is helpful when making circles or ovals with CSS.

Another interesting aspect of the border-radius property is that it can accept multiple values to specify the radius for each corner separately. For example:

div {
   border: 2px solid black;
   border-radius: 5px 10px 15px 20px; 
}

In this example, the first value (5px) applies to the top-left corner, the second value (10px) applies to the top-right corner, the third value (15px) to the bottom-right, and the fourth value (20px) to the bottom-left.

Using the border-radius property enhances the look and feel of your website by making it visually more appealing. It is worth noting that this property is well supported across all modern browsers making it a handy tool in a web developer's arsenal.

Avoid the common confusion with non-existing properties such as border-curve, border-round, or round-border. These are not valid CSS properties, and therefore won't have any effect on your design. Always use border-radius for controlling the roundness of borders in CSS.