Skip to main content

CSS Rounded Borders

CSS Rounded Borders

In CSS, you can easily create rounded corners for elements using the border-radius property. This allows you to transform rectangular or square boxes into elements with smooth, rounded edges. Rounded borders are commonly used in modern web design to create buttons, cards, and various other UI elements that look visually appealing and soft. This article will provide an in-depth explanation of CSS rounded borders, including how to use the border-radius property, its values, and practical examples to create aesthetically pleasing designs.

01. What Is CSS Border Radius?

The border-radius property in CSS is used to define the radius of the element’s corners. This property can be applied to any element with a border, and it allows the corners of the border box to be rounded. The higher the value of the border radius, the more pronounced the curve of the corners will be.

The syntax of the border-radius property is as follows:


border-radius: <radius>;

radius can be specified using various units, such as pixels (e.g., px), percentages (e.g., %), or other length units. By default, border-radius affects all four corners equally, but it can also be customized for each corner individually.

02. Understanding the Syntax of Border Radius

The border-radius property can accept one, two, three, or four values, allowing for different styles of rounding the corners:

  • One value: Applies the same radius to all four corners.
  • Two values: The first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.
  • Three values: The first value applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner.
  • Four values: Each value applies to a specific corner in a clockwise order: top-left, top-right, bottom-right, and bottom-left.

Here are examples of the various usages of border-radius:


/* One value */
element {
  border-radius: 10px; /* All corners rounded equally */
}

/* Two values */
element {
  border-radius: 10px 20px; /* Top-left and bottom-right corners 10px, top-right and bottom-left corners 20px */
}

/* Three values */
element {
  border-radius: 10px 20px 30px; /* Top-left 10px, top-right and bottom-left 20px, bottom-right 30px */
}

/* Four values */
element {
  border-radius: 10px 20px 30px 40px; /* Top-left 10px, top-right 20px, bottom-right 30px, bottom-left 40px */
}

03. Using Percentage Values for Border Radius

In addition to pixel values, you can also use percentages for border-radius. Using percentage values creates elliptical rounding, which is especially useful for creating circular shapes. The percentage is based on the element’s width and height.

Here is an example of using percentages for border-radius:


element {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Creates a perfect circle */
}

In this example, the element will have a circular shape because the border-radius is set to 50%, making the radius half of the width and height of the element.

04. Elliptical Border Radius

When you use two values for border-radius, the first value defines the horizontal radius, and the second value defines the vertical radius. This can be used to create elliptical shapes rather than perfectly round corners.


element {
  width: 200px;
  height: 100px;
  border-radius: 50px 25px; /* Horizontal radius 50px, vertical radius 25px */
}

In this example, the element will have elliptical corners, as the horizontal radius is larger than the vertical radius.

05. Practical Examples of Border Radius

05.1. Creating a Rounded Button

One common use of border-radius is to create rounded buttons. Here's how you can create a simple rounded button:


button {
  padding: 10px 20px;
  border: 2px solid #2196F3;
  background-color: #2196F3;
  color: white;
  border-radius: 15px; /* Rounded corners */
  cursor: pointer;
}

This button will have smooth rounded corners with a 15px radius. The rounded effect enhances the visual appeal and user interaction experience.

05.2. Creating Rounded Cards

Another popular design pattern is creating cards with rounded corners. Below is an example of a simple card layout with rounded corners:


.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 20px; /* Rounded corners */
  background-color: white;
}

This card will have a subtle 20px rounded effect around all four corners, giving it a soft, modern look.

05.3. Creating Circular Images

When using the border-radius property with percentage values, you can create circular images. Here's an example:


img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Creates a circular image */
}

This will make the image perfectly circular by setting the border-radius to 50%.

06. Border Radius with Shorthand Properties

As with other CSS properties, you can also use the border-radius property in a shorthand manner. Instead of specifying individual values for each corner, you can group them together using a single declaration for all four corners, as explained earlier.

06.1. Border Radius with Four Values

Here’s how you can use four values for different corner radii:


element {
  border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */
}

This gives each corner a distinct radius, creating a more complex rounded effect.

06.2. Border Radius with One Value

If you want all corners to have the same rounding, you can use one value for all sides:


element {
  border-radius: 20px; /* All corners have 20px radius */
}

07. Browser Support for Border Radius

The border-radius property is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, older versions of Internet Explorer (specifically IE 8 and below) do not support this property. To ensure that your rounded borders appear consistently across browsers, consider using vendor prefixes (although they are no longer required in most modern browsers).

Example of vendor prefixing (not necessary in most cases anymore): 

.element {
  -webkit-border-radius: 10px; /* Safari and Chrome */
  -moz-border-radius: 10px; /* Firefox */
  border-radius: 10px; /* Standard syntax */
}

Conclusion

The border-radius property in CSS allows you to easily create rounded corners for elements, contributing to modern and appealing designs. Whether you are working with buttons, images, or entire layout cards, rounded borders can enhance the visual presentation and user experience. By understanding the different ways to use the border-radius property—using one, two, three, or four values, as well as percentages—you can apply this property effectively to your designs, achieving both functional and aesthetic results.

Comments

Post a Comment