What Is Border Radius?

Border radius is a design setting that controls how rounded the corners of an element appear on a webpage.

By adjusting the border radius, you can change sharp, square corners into softer, rounded edges.

How Border Radius Works

Border radius is usually measured in pixels (px). The higher the value, the more rounded the corners become.

• 0px – Sharp, square corners

• Small value (for example 4px to 8px) – Slightly rounded corners

• Medium value (for example 12px to 20px) – Clearly rounded corners

• High value (for example 999px) – Fully rounded edges, often used for circular buttons or badges

Where You Will Find Border Radius in the CMS

The border radius setting is available throughout the CMS in various locations, including:

• CTA buttons

• Images

• Pages

• Articles

• Sections

• Widgets

• Modules

This allows you to maintain consistent styling across your entire site.

Why Use Border Radius?

Border radius is an easy-to-implement design feature that can help your website align with your brand guidelines.

Rounded corners can:

• Create a softer, more modern appearance

• Reduce the rigid feel of square layouts

• Improve visual consistency across components

• Help match established brand styling

Even small adjustments can have a noticeable impact on the overall look and feel of your site.

Summary

Border radius controls the curvature of an element’s corners. Increasing the value makes corners more rounded, while setting it to 0 keeps them square. It is a simple but effective way to enhance your design and ensure consistency across your CMS.