A complete guide to border-radius in CSS

Border-radius is a CSS property that allows you to round the corners of an element. It is a useful way to add a bit of style and visual interest to your web page. In this guide, we’ll take a closer look at border-radius and show you how to use it in your CSS.

Basic Usage

The border-radius property can be applied to any HTML element that has borders, including divs, images, and buttons. Here’s the basic syntax:

css

border-radius: value;

The value can be a single number or a series of four numbers separated by slashes. If you use a single number, it will be applied to all four corners of the element. If you use four numbers, they will be applied to the top left, top right, bottom right, and bottom left corners, respectively.

css

border-radius: 10px;

border-radius: 10px 5px 10px 5px;

The first example above will create rounded corners with a radius of 10 pixels on all four corners of the element. The second example will create rounded corners with a radius of 10 pixels on the top left and bottom right corners, and a radius of 5 pixels on the top right and bottom left corners.

Percentages can also be used as values for the border-radius property. For example, border-radius: 50% will create a perfect circle on a square element.

Multiple Values

You can also use the border-radius property to create different shapes for each corner of an element. Here’s the syntax:

css

border-radius: top-left top-right bottom-right bottom-left;

For example, if you wanted to create a pill-shaped element, you could use the following code:

css

border-radius: 50px / 25px;

The first value (50px) sets the horizontal radius for the top and bottom corners, while the second value (25px) sets the vertical radius for the left and right corners.

Advanced Techniques

There are many advanced techniques that you can use with the border-radius property to create unique shapes and effects. Here are a few examples:

Create a scalloped edge effect by using a very large border-radius value:

css

border-radius: 100px;

Create a triangle by setting one corner’s radius to 0:

css

border-radius: 0 20px 0 0;

Create a speech bubble by using a combination of border-radius and borders:

css

border-radius: 10px 0 10px 10px;

border-width: 10px;

border-style: solid;

border-color: #007bff transparent transparent transparent;

The border-radius property is a versatile and powerful tool for creating rounded corners and unique shapes in your web pages. By using the different techniques and values available, you can create a wide range of effects to enhance the look and feel of your website.