CSS border-radius: The Border Radius Property

The CSS border-radius property creates rounded corners on elements. It enhances the aesthetics of design elements without the need for graphic editing.

How to Use CSS border-radius

You can define border-radius in several different units, including pixels (px) and percentages (%).

.box {
    border-radius: 10px; /* pixels */
    border-radius: 10%;  /* percentage of the container's size */
}

When to Use CSS border-radius

The border-radius property is useful whenever you need to round corners of an HTML element.

Rounding User Interface Elements

You can use border-radius to round buttons and input fields to give them an approachable and friendly look.

.button {
    padding: 10px 20px;
    background-color: coral;
    color: white;
    border-radius: 8px; /* Rounded corners make the button more tap-friendly */
}

Rounding Images

Similarly, you can round image elements with border-radius. By setting border-radius to 50%, you can make the image a perfect circle.

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Perfect circle */
    border: 2px solid #fff;
}

Creating Card Designs

By combining border-radius with box-shadow, you can create appealing card designs.

.card {
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 10px;
}

Examples of Border Radius in CSS

Countless websites use the border-radius property to improve their visual appearance. Here are some simple examples:

Search Engines

A search engine might use border-radius to round its search box and search button. This subtle design choice can make the interface feel more welcoming and modern.

.search-box {
    border: 2px solid #ccc;
    padding: 8px 10px;
    border-radius: 4px; /* Rounded corners for the input box */
    width: 200px;
}

.search-button {
    border: none;
    background-color: blue;
    color: white;
    padding: 8px 16px;
    border-radius: 4px; /* Matching rounded corners for the button */
    cursor: pointer;
}

Social Media Websites

Social media websites might set border-radius to 50% to create rounded profile images.

.profile-image {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Project Management Tools

Many project management tools use card layouts to visually organize tasks and projects. Applying border-radius to these cards softens their appearance, making their interfaces feel more accessible and less rigid.

.task-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.task-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

Learn More About Border Radius in CSS

Units for border-radius

The CSS border-radius property accepts various units, including pixels and percentages.

• Pixels (px): Pixels offer precise control over the border radius, making them ideal for fixed-size elements.

  Copy Code

  .button {
      border-radius: 5px; /* Fixed radius of 5 pixels */
  }
  

• Percentages (%): Percentages relate the radius to the size of the element itself, scaling the curvature with the element's dimensions. Using percentages is particularly useful for creating perfect circles.

  Copy Code

  .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%; /* Perfect circle */
  }
  

Elliptical Corners with CSS border-radius

By specifying two radii and separating them with a slash (/), you can also create elliptical corners. The first value sets the horizontal radius, and the second value sets the vertical radius.

For example, you can apply elliptical corners to create an egg-shaped element:

.egg-shape {
    width: 100px;
    height: 150px;
    background-color: #FFD700; /* gold */
    border-radius: 50% / 30%; /* Horizontal radius is 50%, vertical radius is 30% */
}

Advanced Shaping with Border-Radius

With the CSS border-radius property, you can also specify different radii for each corner of an element.

When you use a single value with border-radius, it applies the same radius to all four corners:

/* Uniform radius for all corners */
.card {
    border-radius: 10px;
}

If you use two values, the first value sets the radius for the top-left and bottom-right corners. The second value applies to the top-right and bottom-left corners:

/* Top-left, Bottom-right | Top-right, Bottom-left */
.container {
    border-radius: 15px 30px;
}

Applying three values sets the radii for the top-left, top-right and bottom-right, and bottom-left corners in that order:

/* Top-left | Top-right and Bottom-right | Bottom-left */
.modal {
    border-radius: 10px 20px 30px;
}

With four values, each value specifies the radius for one corner, starting from the top-left and moving clockwise:

/* Top-left | Top-right | Bottom-right | Bottom-left */
.profile {
    border-radius: 5px 15px 25px 10px;
}

Transition Effects with Border-Radius

Using CSS transitions with border-radius can create smooth, animated effects when the border radius changes. This can enhance the interactive feel of the site, providing a dynamic user experience.

.animated-border {
    transition: border-radius 0.3s ease;
    border-radius: 5px;
}

.animated-border:hover {
    border-radius: 50%;
}