CSS Border Radius Generator
Generate CSS border-radius values visually. Adjust each corner independently with live preview and copy the CSS code.
A CSS border radius generator is a specialized development tool and conceptual framework that allows web designers and developers to visually manipulate the curvature of HTML elements and automatically generate the corresponding CSS code. Understanding the underlying border-radius property is essential because it fundamentally dictates the geometry of modern user interfaces, transforming harsh, right-angled boxes into softer, more organic shapes that improve user experience and aesthetic appeal. By mastering both the complex mathematics of elliptical rendering and the practical application of these generators, you will gain complete control over the structural styling of modern web applications, from simple pill-shaped buttons to complex, asymmetrical organic blobs.
What It Is and Why It Matters
The CSS border-radius property is a stylistic rule in Cascading Style Sheets (CSS) that defines how the corners of an element's outer bounding box are rounded. At its core, the web is built on the CSS Box Model, meaning every single element—whether it is a paragraph of text, an image, or a complex structural container—is inherently a rectangle. Without intervention, web interfaces are rigid grids of sharp 90-degree angles. The border-radius property intervenes in this geometric rigidity by instructing the browser's rendering engine to draw a curve at the intersections of the element's borders, effectively clipping the background and inner content to fit within this new curved boundary. A CSS border radius generator is a graphical interface that abstracts the mathematical complexity of this property, allowing users to drag sliders or manipulate visual handles to achieve the desired curvature, immediately outputting the precise syntax required to replicate that shape in code.
Understanding and utilizing this property matters immensely for both psychological and functional reasons. In human psychology, a phenomenon known as "contour bias" dictates that the human brain prefers smooth, rounded physical objects over sharp, angular ones. Sharp angles subconsciously signal threat or danger, whereas curves signal safety and approachability. In the context of user interface design, applying a border radius to interactive elements like buttons, input fields, and dialog boxes makes the interface feel more intuitive, friendly, and modern. Furthermore, rounded corners help guide the user's eye inward toward the content of a container, whereas sharp corners draw the eye outward. From a technical standpoint, mastering the underlying code generated by these tools is critical because modern web design relies heavily on responsive, fluid layouts. A developer must understand how a fixed pixel radius behaves differently than a percentage-based radius when a container stretches across a 4K monitor versus a compact mobile screen.
History and Origin
To truly appreciate the power of modern CSS border radius capabilities, one must understand the grueling limitations of early web design. In the late 1990s and early 2000s, the web was strictly rectangular. If a designer wanted rounded corners on a navigation menu or a content box, they could not use code to achieve it. Instead, they had to rely on image-slicing techniques. The most famous of these was the "Sliding Doors" technique, popularized by designer Douglas Bowman in 2003. This method required designers to open Adobe Photoshop, draw a rounded rectangle, slice it into multiple tiny image files (top-left corner, top-right corner, etc.), and use complex, nested HTML <table> or <div> structures to stitch the images back together on the webpage. This approach was devastatingly inefficient; it required multiple HTTP requests for the images, bloated the HTML markup, and made the boxes completely inflexible. If the box needed to be resized, the designer often had to recreate the images from scratch.
The salvation from this tedious process began with the drafting of the CSS Backgrounds and Borders Module Level 3. The World Wide Web Consortium (W3C), the main international standards organization for the World Wide Web, recognized the desperate need for a native rounding mechanism. The border-radius property was first proposed in 2005. However, standardizing how browsers should calculate and render these curves took years. During the late 2000s, browser vendors began implementing experimental versions of the property using vendor prefixes. Mozilla Firefox introduced -moz-border-radius, while Apple's Safari and Google's Chrome utilized -webkit-border-radius. Developers had to write three or four lines of identical CSS just to ensure a single box had rounded corners across different browsers.
The turning point occurred around 2010 to 2012, as HTML5 and CSS3 gained mass adoption. The W3C finalized the specification, and major browsers dropped the vendor prefixes, allowing developers to use the unified border-radius property. This single line of code rendered millions of sliced corner images obsolete overnight, drastically improving website loading speeds and developer productivity. Today, visual generators build upon this rich history, allowing developers to push the boundaries of the specification—such as creating complex 8-value elliptical shapes—without having to memorize the intricate syntax that evolved from those early W3C drafts.
Key Concepts and Terminology
To navigate the world of CSS rounding and visual generators, you must first build a robust vocabulary of the underlying concepts. The foundational concept is the CSS Box Model, which dictates that every HTML element consists of content, padding, borders, and margins. The border-radius applies specifically to the outer edge of the border box. If an element has no border, the radius applies to the outer edge of the background. Another critical term is the Bounding Box, the invisible, strict rectangle that dictates the maximum width and height of the element before any rounding is applied. When you apply a radius, you are not changing the bounding box; you are changing the Clipping Path, which determines which parts of the element are visible and which are hidden (clipped) away.
When discussing the curves themselves, we differentiate between Circular Radii and Elliptical Radii. A circular radius uses a single value to define a perfect quarter-circle at a corner. The value represents the radius of that circle. An elliptical radius uses two values per corner: one defining the horizontal width of the ellipse, and the other defining the vertical height. This creates an asymmetrical curve, often described as an oval. The terminology for the syntax involves Shorthand Properties and Longhand Properties. The longhand properties target specific corners individually, such as border-top-left-radius. The shorthand property, border-radius, allows you to define all four corners in a single line.
Finally, you must understand the concept of CSS Units. The values you input into a generator or write in code must have a unit of measurement. Absolute units, like pixels (px), define a fixed, unchanging physical size regardless of the element's total dimensions. Relative units, like percentages (%), are calculated dynamically based on the current width and height of the bounding box. Understanding the interplay between the bounding box, the type of curve (circular vs. elliptical), and the chosen unit of measurement is the key to unlocking the full potential of CSS shape manipulation.
How It Works — Step by Step
The mechanical operation of the border-radius property is a fascinating study in CSS parsing and geometric rendering. When a browser reads a stylesheet, it looks at the border-radius declaration and parses the values based on strict rules. The shorthand property can accept between one and four values for standard circular corners. If you provide one value, such as border-radius: 10px;, the browser applies a 10-pixel circular radius to all four corners. If you provide two values, such as border-radius: 10px 20px;, the first value applies to the top-left and bottom-right corners, while the second value applies to the top-right and bottom-left corners. Three values (10px 20px 30px) target the top-left, the top-right and bottom-left simultaneously, and the bottom-right, respectively. Four values (10px 20px 30px 40px) apply to the top-left, top-right, bottom-right, and bottom-left in a clockwise direction.
To understand the mechanics, let us walk through a complete mathematical example of an elliptical radius using the complex eight-value syntax, separated by a slash (/). Consider the following CSS rule: border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; applied to a box that is 200 pixels wide and 200 pixels tall. The browser splits this declaration into two halves. The values before the slash dictate the horizontal radii (the width of the invisible ellipses at the corners). The values after the slash dictate the vertical radii (the height of those ellipses).
Step 1: The browser isolates the top-left corner. It takes the first horizontal value (10px) and the first vertical value (50px). It draws an invisible oval in the top-left corner that is 20 pixels wide (radius * 2) and 100 pixels tall (radius * 2). The corner of the element is then carved out along the lower-right quadrant of this oval.
Step 2: The browser moves clockwise to the top-right corner. It takes the second horizontal value (20px) and the second vertical value (60px), drawing an ellipse and clipping the lower-left quadrant.
Step 3: For the bottom-right corner, it uses the third values (30px horizontal, 70px vertical), clipping the upper-left quadrant of that ellipse.
Step 4: Finally, for the bottom-left corner, it takes the fourth values (40px horizontal, 80px vertical) and clips the upper-right quadrant. By manipulating these eight distinct variables, generators allow developers to create organic, non-uniform shapes—often called "CSS blobs"—that look like drops of liquid or asymmetrical pebbles, completely masking the underlying rectangular box model.
The Mathematics of Overlapping Curves
A crucial, yet rarely understood, aspect of CSS border radius is the mathematical algorithm the browser uses to prevent impossible geometry. What happens if you tell a browser to create a curve that is larger than the element itself? For instance, imagine you have a button that is exactly 100 pixels wide and 50 pixels tall. You apply the following CSS: border-radius: 60px;. Mathematically, the top-left corner is trying to draw a circle with a 60-pixel radius, and the top-right corner is also trying to draw a circle with a 60-pixel radius. The sum of these two adjacent horizontal radii is 120 pixels (60 + 60). However, the bounding box is only 100 pixels wide. If the browser simply drew what you asked, the curves would overlap, invert, and break the rendering engine.
To solve this, the CSS Backgrounds and Borders Level 3 specification includes a strict scaling algorithm that browsers must follow. The rule states: if the sum of any two adjacent radii exceeds the size of the border box, the browser must proportionally reduce all radii until none of them overlap. The browser calculates a scaling factor by dividing the available space by the requested space. In our example, the available width is 100 pixels, and the requested width is 120 pixels. The browser divides 100 by 120, resulting in a scaling factor of exactly 0.8333.
The browser then takes this scaling factor and multiplies it against your requested CSS values. The top-left horizontal radius becomes 60 pixels multiplied by 0.8333, which equals 49.998 pixels. The top-right horizontal radius also becomes 49.998 pixels. The sum of the two new adjacent radii is now 99.996 pixels, perfectly fitting within the 100-pixel bounding box without overlapping. This scaling is applied globally to the element; if the horizontal radii must be scaled down by 0.8333, the vertical radii must also be scaled down by the exact same multiplier to maintain the intended proportions of the curves. This automatic, silent mathematical correction is why you can set a massive value like border-radius: 9999px; on a button, and it will perfectly round the edges into a pill shape without breaking the layout.
Types, Variations, and Methods
When utilizing a border radius generator or writing the code manually, you must choose between different types of measurement units, each offering distinct behaviors and variations. The most common method is using Absolute Pixels (px). Pixel values provide exact, unyielding control. If you set border-radius: 8px;, the corner will always feature an 8-pixel curve, regardless of whether the element is 50 pixels wide or 5,000 pixels wide. This method is the industry standard for UI components like cards, modals, and input fields, where consistent, subtle rounding is desired across the entire application interface.
The second major variation is using Relative Percentages (%). Unlike pixels, percentages calculate the radius based on the dimensions of the element's bounding box. The horizontal radius is calculated as a percentage of the element's width, and the vertical radius is calculated as a percentage of the element's height. If you apply border-radius: 50%; to a perfectly square element (e.g., 200px by 200px), the horizontal and vertical radii will both evaluate to 100px, creating a perfect circle. However, if you apply border-radius: 50%; to a rectangular element (e.g., 400px wide and 200px tall), the horizontal radius becomes 200px and the vertical radius becomes 100px. This creates a symmetrical ellipse, or oval. Beginners often misuse percentages, expecting them to behave like pixels, resulting in stretched, distorted corners on rectangular boxes.
A third, increasingly popular method involves using Relative Typographic Units (em or rem). These units tie the size of the curve to the font size of the document or element. If the root font size of a website is 16 pixels, applying border-radius: 0.5rem; results in an 8-pixel curve. The profound advantage of this method is accessibility and fluid scaling. If a visually impaired user increases their browser's default font size from 16 pixels to 24 pixels, the border radius will automatically scale up to 12 pixels, maintaining the proportional aesthetic of the design. Choosing between pixels, percentages, and rems is not a matter of right or wrong, but rather a strategic decision based on whether the component needs to be rigid, fluid, or tied to typography.
Real-World Examples and Applications
To solidify these concepts, let us examine concrete, real-world scenarios where specific border radius configurations are applied. The most ubiquitous example is the Circular Avatar. In social media applications, user profile pictures are almost always displayed as perfect circles. A developer starts with a square image file, let us say an <img> tag that is exactly 120 pixels wide and 120 pixels tall. By applying border-radius: 50%;, the browser calculates a 60-pixel radius for all four corners, perfectly clipping the square image into a circle. If the original image was not a perfect square, the developer would pair this with the CSS property object-fit: cover; to ensure the image fills the space without distortion before the circular clipping is applied.
Another highly common application is the Pill-Shaped Button. Modern web design frequently utilizes call-to-action buttons that have completely rounded left and right edges, resembling a medical pill. To achieve this, developers use a massive pixel value, often written as border-radius: 9999px; or border-radius: 100vw;. Because of the browser's mathematical scaling algorithm (discussed previously), the browser will not actually attempt to draw a 9,999-pixel circle. Instead, it will look at the button's height—let us say 48 pixels—and scale the radius down to exactly half the height (24 pixels). This guarantees that the button's edges will always be perfectly semicircular, even if the text inside the button changes and the button grows wider or taller.
A more advanced application is the Organic Blob Shape, often used for decorative background elements in modern, playful web designs. Instead of standard circles or rectangles, designers want fluid, asymmetrical shapes that look like lava lamps or water droplets. This is where the 8-value elliptical syntax and visual generators shine. A developer might use a generator to produce code like border-radius: 43% 57% 71% 29% / 37% 55% 45% 63%;. By using percentages that do not add up to 100 on adjacent sides, the resulting shape is highly irregular. When developers apply CSS animations to slowly transition these 8 percentage values to different numbers over a 10-second loop, the blob appears to morph and float organically on the screen, creating a highly engaging visual experience.
The Role of CSS Border Radius Generators
While the syntax of border-radius is logical, human brains are not naturally equipped to visualize the complex interplay of eight overlapping elliptical percentage values. This cognitive disconnect is why CSS border radius generators exist. A generator acts as a visual translation layer between human aesthetic intent and machine-readable code. When a designer wants a specific organic shape, guessing the percentages—typing 42% 58%, refreshing the browser, realizing it looks wrong, and trying 40% 60%—is a massive waste of time. Generators solve this by providing a graphical interface, typically featuring a central shape surrounded by draggable handles.
When a user clicks and drags a handle on a generator, the tool runs a real-time JavaScript function that calculates the exact percentage position of that handle relative to the bounding box. It instantly updates the visual representation of the shape using the DOM (Document Object Model) and simultaneously updates a text box containing the precise CSS syntax. This creates a frictionless feedback loop. The user relies entirely on visual intuition, dragging points until the shape "looks right," and the generator handles the tedious mathematical translation.
Furthermore, generators serve as critical educational tools. A novice developer might not understand the slash (/) syntax for elliptical radii. By using a generator and watching the output code change in real-time as they drag the vertical handles independently of the horizontal handles, the developer intuitively learns how the CSS specification works. The generator bridges the gap between theoretical knowledge and practical application, allowing developers to implement advanced, complex geometries in seconds rather than hours.
Common Mistakes and Misconceptions
Despite its apparent simplicity, the border-radius property is fraught with pitfalls for beginners. The single most common misconception is the belief that border-radius: 100%; is the correct way to make a circle. While 100% will visually result in a circle on a square element, it is mathematically incorrect and computationally wasteful. As explained in the scaling algorithm section, the maximum effective radius on a square before overlapping occurs is 50% of the width and height. When you declare 100%, the browser detects a massive overlap (100% + 100% = 200%) and is forced to run the scaling algorithm to reduce your 100% values down to 50%. Using border-radius: 50%; bypasses this unnecessary calculation, resulting in cleaner, more performant code.
Another frequent mistake involves Clipping Children Elements. Beginners often apply a border radius to a parent container—such as a card component—and are confused when the top corners of the card remain sharp. This happens because the parent container has been rounded, but the child element inside it (usually a header image) is still a sharp rectangle that visually overflows the rounded corners of the parent. The border radius only clips the background of the element it is applied to, not the child HTML elements inside it. The mandatory fix for this is to apply the CSS property overflow: hidden; to the parent container. This tells the browser to physically cut off any child content that bleeds outside the newly rounded bounding box.
A third subtle but devastating mistake is ignoring the Hover State Transition. Developers frequently animate border radii, transitioning a square to a circle when a user hovers over an element. However, if the element contains text, changing the border radius dramatically alters the internal geometry of the box. The text may suddenly overflow the newly curved corners, causing ugly clipping or forcing the text to reflow and jump around the screen. Experienced developers know that border radius animations should generally be restricted to decorative elements, icons, or background layers, rather than containers holding complex, fluid text layouts.
Best Practices and Expert Strategies
Professional web development requires moving beyond merely making things look good to implementing scalable, maintainable systems. The hallmark of expert border radius usage is the implementation of a Design Token System. Instead of arbitrarily scattering 4px, 5px, and 8px values throughout a codebase, experts define a strict scale of variables. Using CSS Custom Properties (variables), they might define --radius-sm: 4px;, --radius-md: 8px;, and --radius-lg: 16px;. Every single rounded corner on the website must use one of these variables. This ensures absolute visual consistency. If the art director decides the brand needs to feel softer and wants to change the standard card radius from 8px to 12px, the developer changes a single variable, and the entire application updates instantly.
Perhaps the most advanced mathematical strategy employed by experts is the Nested Radius Formula. When you have a rounded container that holds a rounded child element (such as a card with a button inside it), applying the exact same border radius to both elements looks aesthetically terrible. If the outer card has a 16px radius, and the inner button also has a 16px radius, the gap between the two curves will appear uneven and disjointed. To achieve perfect visual harmony, experts use a strict geometric formula: Outer Radius = Inner Radius + Padding.
Let us walk through a concrete example of this formula. Imagine a card container with an outer radius. Inside this card, there is an image. The card has a padding of 12px to keep the image away from the edge. The designer wants the image to have a border radius of 8px. To find the correct radius for the outer card, the developer takes the inner radius (8px) and adds the padding (12px). The outer card must therefore have a border radius of 20px. If you draw this on paper, you will see that the center point of the outer circle and the center point of the inner circle now perfectly align, creating a uniform, aesthetically pleasing 12-pixel gap around the entire curve.
Edge Cases, Limitations, and Pitfalls
While border-radius is robust, it breaks down in several specific edge cases that developers must anticipate. One of the most notorious limitations involves HTML <table> elements. If you apply border-collapse: collapse; to a table (a standard practice to remove double borders between cells), the border-radius property on the table element will simply stop working. The W3C specification explicitly states that border-radius does not apply to tables with collapsed borders. The workaround requires excruciating effort: developers must set border-collapse: separate;, manually remove internal borders, and apply individual border-radius properties to the specific top-left, top-right, bottom-left, and bottom-right <td> (table data) or <th> (table header) cells.
Another significant pitfall involves Anti-Aliasing Bugs. When a browser renders a curved edge, it must use anti-aliasing to blend the pixels and make the curve look smooth on a square pixel monitor. However, when an element has a background color and a border of a different color, rendering engines (particularly older versions of Safari and Chrome) often struggle to calculate the anti-aliasing perfectly at the boundary. This results in a microscopic, 1-pixel gap where the background color bleeds through the border, creating a faint, ugly halo around the curve. The standard expert workaround for this is to use background-clip: padding-box;, which forces the background color to stop exactly at the inner edge of the border, preventing the visual bleed.
Scrollbars present another frustrating edge case. If you apply border-radius and overflow: auto; to a container, and the content inside that container requires a scrollbar, the scrollbar itself will not respect the border radius. On operating systems like Windows, the rigid, rectangular scrollbar will overlay the rounded corner, completely ruining the aesthetic. There is no native CSS property to automatically curve a default operating system scrollbar to match a container's border radius. Developers are forced to either accept the visual glitch, hide the scrollbar entirely while maintaining scroll functionality, or use complex, custom CSS pseudo-elements (::-webkit-scrollbar) to design a bespoke scrollbar that mimics the curve.
Industry Standards and Benchmarks
To design interfaces that feel native and professional, developers must align their border radius values with established industry standards. The two most influential design systems in the world—Google's Material Design and Apple's Human Interface Guidelines (HIG)—dictate the benchmarks for rounded corners.
Google's Material Design 3 system relies heavily on a standardized scale of rounding to convey meaning and hierarchy. They use density-independent pixels (dp), which translate directly to CSS pixels on standard displays. Material Design defines specific categories: None (0px) for full-screen structural elements; Extra Small (4px) for small components like checkboxes and tooltips; Small (8px) for standard buttons and chips; Medium (12px) for cards and dialogs; Large (16px) for prominent navigation drawers; and Full (9999px) for floating action buttons and pill-shaped search bars. By adhering strictly to this 0-4-8-12-16 scale, developers ensure their applications feel mathematically grounded and familiar to Android and Google web users.
Apple's standard is far more mathematically complex. Apple does not use standard circular radii for its iOS and macOS interfaces. Instead, they use a shape called a "squircle," which relies on a continuous curve (specifically, a Lamé curve or superellipse). A standard CSS border-radius transitions abruptly from a straight line to a circular curve, which Apple designers argue creates a harsh visual joint. A squircle gradually increases its curvature, resulting in a much smoother, more organic transition. While native CSS border-radius cannot perfectly replicate a true mathematical squircle, developers often benchmark against Apple's aesthetic by using complex 8-value elliptical radii generated by specialized tools, or by utilizing the proprietary CSS property clip-path: inset(0 round 20px) combined with SVG masks to approximate the continuous curve standard expected by Apple users.
Comparisons with Alternatives
While border-radius is the standard tool for rounding corners, it is not the only method for shaping elements in CSS. Comparing it with its alternatives reveals when to use which tool. The primary alternative is the CSS clip-path property. While border-radius simply rounds the corners of the existing rectangular box, clip-path allows you to draw entirely custom vector shapes—polygons, stars, triangles, and complex SVG paths—and cut the element to fit that shape. If you need an element to be a hexagon, border-radius is entirely useless; you must use clip-path: polygon(...). However, clip-path is computationally heavier than border-radius. Furthermore, clip-path literally cuts away the element, meaning any box-shadow or border applied to the element will also be cut off and hidden. Border-radius smoothly curves the border and the shadow along with the element.
Another alternative is SVG Masks (mask-image). This technique involves drawing a shape in a Scalable Vector Graphic file and using CSS to apply that graphic as a cookie-cutter over an HTML element. SVG masks are incredibly powerful because they support alpha transparency; you can create a border that fades out smoothly, or a shape with rough, textured edges like torn paper. Border-radius can only create perfect, mathematically smooth geometric curves. However, SVG masks require external asset management, increase the payload size of the webpage, and are significantly harder to animate.
Ultimately, border-radius wins in 95% of use cases due to its sheer performance, simplicity, and native integration with the CSS Box Model. It is hardware-accelerated by modern browsers, meaning animating a border-radius requires very little CPU power. You choose border-radius for structural UI components (buttons, cards, inputs). You escalate to clip-path when you need sharp geometric polygons. You escalate to SVG masks when you need textured, transparent, or hyper-complex illustrative shapes that cannot be defined by simple math.
Frequently Asked Questions
What is the difference between pixels (px) and percentages (%) in border radius?
Pixels define an absolute, fixed curve size that never changes, regardless of the element's dimensions. If you set 8px, the curve is always exactly 8 pixels wide and tall. Percentages calculate the curve based on the element's current width and height. If you set 50% on a rectangle that is 400px wide and 200px tall, the horizontal curve will be 200px and the vertical curve will be 100px, creating an oval. Pixels are best for consistent UI elements like cards, while percentages are best for responsive shapes like circular avatars.
Why does my border radius not hide the image inside my div?
The border-radius property only rounds the bounding box, border, and background of the specific element it is applied to. It does not automatically force child elements (like an <img> tag) to obey that new curved boundary. Because the child element is still a sharp rectangle, it visually overflows the parent's rounded corners. To fix this, you must add the CSS property overflow: hidden; to the parent container, which instructs the browser to physically clip off any child content that bleeds outside the parent's rounded edges.
How do I make a perfect circle using CSS?
To make a perfect circle, two conditions must be met. First, the element must have an exactly equal width and height (a perfect square bounding box), such as width: 200px; height: 200px;. Second, you must apply border-radius: 50%;. The browser will calculate the radius as exactly half the width and half the height, meeting perfectly in the middle of the element's edges to form a continuous circular curve. Using 100% will also visually work, but 50% is mathematically correct and more performant.
What does the slash (/) mean in a border radius declaration?
The slash is used to separate horizontal radius values from vertical radius values, allowing you to create asymmetrical, elliptical curves. The values before the slash dictate how far the curve extends horizontally along the top and bottom edges. The values after the slash dictate how far the curve extends vertically along the left and right edges. For example, border-radius: 20px / 50px; creates corners that are narrow (20px wide) but tall (50px high), resulting in an elongated oval appearance.
How do I apply a border radius to only one specific corner?
You can target individual corners using the longhand CSS properties instead of the shorthand. The four properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Alternatively, you can use the shorthand property with four values. For example, border-radius: 10px 0 0 0; applies a 10-pixel radius to the top-left corner, and a 0-pixel radius (sharp corner) to the top-right, bottom-right, and bottom-left corners, moving in a clockwise direction.
Why does border radius break when I use it on a table?
According to the CSS specification, the border-radius property is ignored on <table> elements if the table has the border-collapse: collapse; property applied. When borders are collapsed, the browser merges the borders of adjacent cells, making it mathematically ambiguous where the outer curve should actually be drawn. To fix this, you must change the table to border-collapse: separate;, manually remove the internal spacing, and apply the border radius directly to the outermost corner <td> or <th> elements.
What is the formula for matching nested border radii?
When placing a rounded element inside a rounded container with padding, applying the same radius to both creates an ugly, uneven gap. To make the curves perfectly concentric, you must use the formula: Outer Radius = Inner Radius + Padding. For example, if your inner image has a 4px radius, and the container has 8px of padding, the container's border-radius must be exactly 12px. This aligns the geometric center points of both curves, resulting in perfect visual harmony.