How to Achieve Perfectly Rounded Corners in CSS

Łukasz HoleczekFollow Łukasz Holeczek on GitHubConnect with Łukasz Holeczek on LinkedInFollow Łukasz Holeczek on X (Twitter)

Tuesday, March 4, 2025

#how-to#html

Rounding the corners of an element is a fundamental way to add visual appeal and flexibility to web pages. Whether you want subtle rounded corners, a circle, or even elliptical corners, mastering the border radius property is a key step toward creating modern, user-friendly interfaces. In this post, you will learn how to use the CSS border radius property, explore best practices for top left and bottom corners, handle right bottom left edges, and even add a box shadow or drop shadow for extra flair. By the end, you will be able to style each corner effectively, apply logical properties for both LTR and RTL layouts, and bring your web designs to life.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

Understanding the CSS Border Radius Property

Theborder-radius property (often referred to as the CSSborder-radius property) allows you to define how each corner of an element is rounded. The property acts as a shorthand property for all constituent properties such asborder-top-left-radius,border-top-right-radius,border-bottom-left-radius, andborder-bottom-right-radius. Each corner has its ownborder-radius, so you can round only one corner, or all four corners, depending on your needs.

When you specifyborder-radius values, you can use either length units (like10px) or percentage values (like50%). A square element with a 50%border-radius will turn into a perfect circle, while two values or three values can help you create elliptical corners or even more irregular shapes.

Here’s a quick code snippet illustrating the border radius property in action:

<divclass="box"style="background-color: #f0f0f0; border: 2px solid #ccc; border-radius: 20px; height: 100px; width: 200px;">  Rounded box</div>

Notice theborder-radius: 20px here. These radius values will give your element’s corners a slightly softer shape. If you used percentage values, you could create elliptical corners or an exact circle, depending on the element’s width and height.

Working with Individual Corners

Sometimes, you need more control over each corner. For example, you might want a top left corner to be more rounded than the bottom right corners, or apply aborder-top-right-radius while leaving the bottom left corners mostly square. You can achieve that by using the four constituent properties:

.element{border-top-left-radius:30px;border-top-right-radius:5px;border-bottom-right-radius:20px;border-bottom-left-radius:15px;}

In this example, each corner of the.element has a separate radius configuration. You could also apply three values or even two values toborder-radius in a shorthand style (for instance,border-radius: 30px 5px 20px), where each second value or third value corresponds to one of the four corners.

CSS Logical Properties for LTR and RTL

An important tip for global support is to use CSS logical properties. Instead ofborder-top-left-radius, you can leverage properties likeborder-start-start-radius orborder-end-end-radius, which automatically adapt to LTR or RTL. For example, in LTR,border-start-start-radius might affect the top left corner, while in RTL, the same property affects the top right corner. This ensures your layout retains consistent style across different writing directions.

.element{border-start-start-radius:15px;/* LTR: top-left corner, RTL: top-right corner */border-end-end-radius:15px;/* LTR: bottom-right corner, RTL: bottom-left corner */}

If you need a ready-made utility, visitCoreUI Border Radius Utilities. These utilities use logical properties under the hood to handle corners seamlessly.

Practical Use Cases and Best Practices

• Creating Buttons: Rounded corners on button elements improve the user experience and modernize the interface.
• Images: Apply aborder-radius property to animg to display CSS rounded corners or even a circular avatar. Just ensure the width and height match if you want a perfect circle.
• Background Image: Adding abackground-image to a box with aborder-radius helps integrate visuals smoothly, especially if you want to highlight an element with a specific shape.
• Box Shadow andDrop Shadow: Combineborder-radius withbox-shadow: 0 4px 6px rgba(0,0,0,0.1); to create a subtle drop effect. You can also control the shadow color and spread for a more dramatic style.
• border-width and Additional Styling: Even when you increase theborder-width, the corners remain rounded. Just be mindful of extrapadding ormargin to prevent the border from overlapping content.

Working with Shorthand and Advanced Shapes

To create elliptical corners, you can supply two values, three values, or even four toborder-radius. If you specify one value and a second value separated by a slash, you can produce more complex shape and circle combos. For instance:

.box{border-radius:50px20px/10px40px;}

This makes the top left and bottom right edges different from the top right and bottom left edges, perfect for irregular shapes. You can even create elliptical corners by mixing precise length and percentage values.

Case Study: Adapting Elements for Multiple Layouts

Imagine you have to localize your web pages in both English and Arabic. Usingborder-start-start-radius ensures that your top left corner is visually correct for LTR, while automatically flipping to top right corner in RTL. This adaptability saves you from writing separate styles. It also maintains uniform corner design across all elements, whether they are left and bottom right or top left and bottom corners.

Using CoreUI Border Radius Utilities

If you want a faster, more standardized way to manage border radius, check outCoreUI Border Radius Utilities. CoreUI provides pre-built classes likerounded,rounded-start,rounded-end, and more, applying logical properties behind the scenes. Here is a simpleexample:

<div class="rounded-start p-3" style="background-color: #e3f2fd;">  CoreUI Utilities for Rounded Corners</div>

• rounded-start automatically appliesborder-start-start-radius andborder-end-start-radius for LTR and flips it for RTL.
• rounded-end does the same forborder-start-end-radius andborder-end-end-radius, ensuring universal support.
• You can mix in other utility classes likeborder,text-center, or evenbox-shadow helpers, giving you complete style control without writing extra custom CSS.

These utilities can help you maintain a unified design approach across different width and layout configurations, saving time and ensuring a professional look.

Summary

Rounding an element’s corners with theborder-radius property is a cornerstone of modern CSS. From square buttons to smoothly rounded panels and intricate elliptical corners, the possibilities are endless. By mastering individual properties likeborder-top-left-radius orborder-bottom-left-radius, employing logical properties for LTR/RTL support, and experimenting withbackground-color,box-shadow, and more, you can polish your designs for any context.

Next Steps / Recommended Resources

• Dive into more advanced examples and tools atCoreUI Border Radius Utilities.
• ExploreMDN’s reference on border-radius for a deeper look at syntax.
• Experiment with custom shapes, partial corner rounding, and a variety of style settings to see what works best for your projects.

About the Author

Follow Łukasz Holeczek on GitHubConnect with Łukasz Holeczek on LinkedInFollow Łukasz Holeczek on X (Twitter)

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.