How to Achieve Perfectly Rounded Corners in CSS
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
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.
Understanding the CSS Border Radius Property
The border-radius property (often referred to as the CSS border-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 as border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. Each corner has its own border-radius, so you can round only one corner, or all four corners, depending on your needs.
When you specify border-radius values, you can use either length units (like 10px) or percentage values (like 50%). 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:
<div class="box" style="background-color: #f0f0f0; border: 2px solid #ccc; border-radius: 20px; height: 100px; width: 200px;">
Rounded box
</div>
Notice the border-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 a border-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 to border-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 of border-top-left-radius, you can leverage properties like border-start-start-radius or border-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, visit CoreUI 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 a
border-radiusproperty to animgto 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 a
background-imageto a box with aborder-radiushelps integrate visuals smoothly, especially if you want to highlight an element with a specific shape. - Box Shadow and Drop Shadow: Combine
border-radiuswithbox-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-widthand Additional Styling: Even when you increase theborder-width, the corners remain rounded. Just be mindful of extrapaddingormarginto 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 to border-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: 50px 20px / 10px 40px;
}
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. Using border-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 out CoreUI Border Radius Utilities. CoreUI provides pre-built classes like rounded, rounded-start, rounded-end, and more, applying logical properties behind the scenes. Here is a simple example:
<div class="rounded-start p-3" style="background-color: #e3f2fd;">
CoreUI Utilities for Rounded Corners
</div>
rounded-startautomatically appliesborder-start-start-radiusandborder-end-start-radiusfor LTR and flips it for RTL.rounded-enddoes the same forborder-start-end-radiusandborder-end-end-radius, ensuring universal support.- You can mix in other utility classes like
border,text-center, or evenbox-shadowhelpers, 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 the border-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 like border-top-left-radius or border-bottom-left-radius, employing logical properties for LTR/RTL support, and experimenting with background-color, box-shadow, and more, you can polish your designs for any context.
Next Steps / Recommended Resources
- Dive into more advanced examples and tools at CoreUI Border Radius Utilities.
- Explore MDN’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.
