css - Rounded Corners Part 1: Basic Rounded Corners Using border-radius

What is border-radius?

The border-radius property allows you to create rounded corners for elements like divs, buttons, and images. It takes one or more values, which determine how much rounding is applied.

Example 1: Applying Rounded Corners to a Box

.box {

  width: 200px;

  height: 100px;

  background-color: blue;

  border-radius: 15px;

}

Explanation:

border-radius: 15px; makes all four corners rounded with a radius of 15 pixels.

The higher the value, the more curved the corners become.

Example 2: Fully Rounded Button

.button {

  padding: 10px 20px;

  background-color: green;

  color: white;

  border-radius: 25px;

  border: none;

}

Explanation:

Larger border-radius values create pill-shaped buttons.

This technique is widely used for modern UI buttons.