The border-radius property in CSS: Rounded borders on images, tables, buttons, inputs, and more

Many times, when we are developing a web page, we want to give our containers, buttons, or images a more modern and pleasant look using rounded borders. Nowadays, this is easily solved with CSS, but it wasn't always like this.

In my case, before the arrival of CSS3, creating rounded corners involved using cropped images, which brought several problems: more weight for the site, extra time designing in editors like GIMP and, even worse, having to redo everything if the container size changed. Luckily, that is behind us thanks to the border-radius property.

In this article, I explain what the border-radius property in CSS is, how it works, and how to use it with practical examples, without the need for images.

Before, we used images, which brings some problems such as:

• A few more KB for our site.
• A waste of time creating the image in an image editor like GIMP.

In addition to the fact that if we wanted containers with different sizes or if we even changed the size of the container, we had to start all over again.

Why we use border-radius today instead of images

Before CSS3, the only reliable way to simulate rounded corners was using images as backgrounds. This generated several real inconveniences:

• The site weighed more (more unnecessary KB).
• We wasted time designing images just for borders.
• Designs were neither flexible nor adaptable.

When I started working with modern CSS, border-radius became one of those essential properties: simple, lightweight, and fully adaptable to any container size. Today it is a standard fully supported by modern browsers.

What is the border-radius property in CSS

The border-radius property allows defining the radius of an element's corners, that is, how rounded its border will be.
By default, its value is 0, which means completely straight corners.

Its basic syntax is very simple:

border-radius: value;

The value can be expressed in different units such as px, %, em, among others, and even combined depending on the effect we want to achieve.

In this article, we will teach you how to create rounded borders with only CSS, that is, without using images in the process.

The border-radius property for defining borders with CSS

To create rounded borders for our containers, we only need to apply the following property:

border-radius

One of the great advantages of this property is its flexibility. Depending on how many values we indicate, the behavior changes.

Where we must indicate the value or values in some unit of measurement defined by CSS; we can even mix them, let's see some cases:

If we wanted to give a 5px radius to our container:

border-radius: 5px;

In this first case, when we only place one value, it will be applied to all corners; however, we can declare a value for each corner:

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

• Top-left
• Top-right
• Bottom-right
• Bottom-left

Where each defined pixel corresponds to one of the following corners:

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

With two values, the first is applied to the top-left and bottom-right corners, and the second to the top-right and bottom-left corners:

border-radius: 10px 20px;

When using three values, the behavior is as follows:

border-radius: 10px 20px 5px;

• First value: top-left corner
• Second value: top-right and bottom-left corners
• Third value: bottom-right corner

Individual corner properties

A property is also defined for each corner:

• border-top-left-radius: Top-left corner.
• border-top-right-radius: Top-right corner.
• border-bottom-left-radius: Bottom-left corner.
• border-bottom-right-radius: Bottom-right corner.

Personally, I use this form when I need to modify a single corner without affecting the others, for example in cards or floating elements.

In parallel to this, you can decide not to apply rounding to all corners of a container, but only to a single corner or edge using, for example, the following CSS:

border-radius:5px 0 0 0;

To round the top-left corner; or what would be the same:

border-top-left-radius:5px;

Use the property that refers to the specific corner directly; you can do the same with the other corners, i.e., top-right or bottom-left/right, and set the values you want or use one or more of these properties.

Examples of using the border-radius property

To do all these tests, the first thing we are going to create is a simple DIV or rectangular container with a default size and a background color. The result would be a container with rounded corners.

Rounded borders in containers (div)

For the following container:

<div class="contenedor1">container with 5px border</div>

We will apply the following rules; including our border-radius:

.contenedor1 { background-color: #0BF; height: 200px; width: 200px; border-radius: 5px;}

We get as a final result:

Combined corners

We can also define different sizes for the corners:

We will apply the following rules; including our border-radius:

.contenedor2 { background-color: #0BF; height: 200px; width: 200px; border-radius: 15px 0 15px 0;}

We get as a final result:

An equivalent of the previous example

.contenedor2_1 {
  background-color: #0BF;
  height: 200px;
  width: 200px;
  border-top-left-radius:15px;
  border-top-right-radius:0;
  border-bottom-right-radius:15px;
  border-bottom-left-radius:0;
  /*border-radius: : 15px 0 15px 0;*/
}

We get the same container as the example above:

Rounded corners on images

In the event that we want to place rounded borders or circles on an image or several images, we can apply everything seen above, only this time the CSS would be directed to the image:

img { border-radius: 20px;}

Rounded corners for inputs and buttons

The same thing happens here as we saw before; everything we saw previously helps us create rounded inputs:

Text field rounded to 5px:

Text field rounded to 10px:

Button rounded to 10px:

Forms also benefit greatly from this property. Inputs and buttons with rounded borders feel more modern and friendly.

Rounded borders of a table with CSS

We can also apply rounding to other elements, for example, a basic HTML table; this is a slightly more complete example since unlike a div, a table has many containers, which would be its TDs to which we can apply rounding and we have several options enhancing all this with the well-known selectors in CSS:

The CSS is simple, but here we use several additional selectors to give a border only to some parts of the table and not the whole table; as you can see below, the rounding is done to the TDs, not the table itself; therefore the TRs that contain the THs and TDs to which the border is applied are the first and last TR, and the THs/TDs are the first and last; once this is clarified, the following CSS will be easy to understand:

table { 
    border-collapse: separate; 
}
td, th { 
    border: solid 1px rgba(0, 178, 255, 1); 
}
tr td, th { 
    border-top-right-radius: 0;               
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
}
th:first-child { 
    border-top-left-radius: 10px; 
}
th:last-child {   
    border-top-right-radius: 10px; 
}
tr:last-child td:first-child { 
    border-bottom-left-radius: 10px; 
}
tr:last-child td:last-child { 
    border-bottom-right-radius: 10px; 
}

Compatibility and best practices

The border-radius property has had excellent support in modern browsers for years. Some final recommendations:

• Use px for precise control and % for circular shapes.
• Avoid exaggerated values that break the aesthetics.
• Combine it with box-shadow for more professional results.
• Do not depend on images for borders.

Conclusions

This is one of the most used properties when making a web page; it has good support in most modern browsers; that's why it's important to know it and understand how it works, which is very simple and practical.

The border-radius property in CSS is one of the simplest and most powerful tools for improving the visual design of a website. From containers and buttons to images and tables, its use is intuitive, flexible, and efficient.

Having lived through the era where all this was done with images, I can say that mastering border-radius saves you time, weight, and headaches. With a few well-applied values, you can completely transform the appearance of your interfaces.

If you want to keep practicing, there are online tools like CSS Matic that allow you to experiment visually with different radii.