🔘 Border Radius Generator

🔘

Click corners to select • Blue = selected

px
px
px
px
px
⚙️
px
🎯
👁️
Border Radius Preview
📝
{{ result.css }}
📊
Type: {{ result.isUniform ?'Uniform' :'Individual' }} corners
CSS Length: {{ result.css ? result.css.length : 0 }} characters
Syntax: {{ getBorderRadiusType() }}
💡

{{ example.title }}

{{ example.code }}
💾
⚠️ {{ error }}

ℹ️ About Border Radius Generator

CSS border-radius rounds the outer border edge of an element by giving each corner a circular or elliptical curve. This generator creates practical CSS for the four physical corners: top-left, top-right, bottom-right, and bottom-left.

Use rounded corners for interface details where the geometry carries meaning: cards and panels, buttons, form controls, avatars, image thumbnails, badges, modal windows, tabs, and notification banners. Small values such as 4px or 8px keep enterprise UI compact, larger values create friendlier product surfaces, and 50% can turn a square into a circle or a wide rectangle into a pill.

CSS syntax:

  • border-radius: 8px; applies the same radius to every corner.
  • border-radius: 12px 4px; maps to top-left/bottom-right, then top-right/bottom-left.
  • border-radius: 16px 16px 4px 4px; maps clockwise: top-left, top-right, bottom-right, bottom-left.
  • border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius can be used when a longhand declaration is clearer.

Elliptical radius details: CSS also accepts a slash form such as border-radius: 40px / 20px;. Values before the slash set horizontal radii; values after the slash set vertical radii. Percentages are calculated from the corresponding size of the border box, so horizontal percentages use width and vertical percentages use height. Negative radius values are invalid.

Examples:

  • .card { border-radius: 8px; } for a consistent reusable panel.
  • .tabs { border-radius: 12px 12px 0 0; } for rounded top tab corners only.
  • .avatar { width: 96px; height: 96px; border-radius: 50%; } for a circular image crop.
  • .shape { border-radius: 40px / 20px; } for an elliptical corner curve.

Limitations and browser behavior:

  • This generator outputs pixel-based physical corner values; edit the CSS manually for logical corner properties or slash-style elliptical output.
  • When adjacent corner radii are too large for the box, browsers proportionally reduce the used radii so the curves do not overlap.
  • border-radius rounds the element background and border, but child content can still overflow unless layout, clipping, or overflow rules prevent it.
  • The property does not apply to collapsed table borders in the same way it applies to normal boxes.
  • Modern browsers support unprefixed border-radius; old vendor prefixes are only relevant for obsolete browser targets.

References: See MDN's border-radius reference and the W3C CSS Backgrounds and Borders specification for formal syntax, shorthand expansion, percentage behavior, and overlapping-curve handling.

Privacy note: Radius values, preview dimensions, and colors are ordinary CSS design settings. The live preview runs in your browser; use the API only when you intentionally want to send those settings to the server for generated output.

API Usage Example:

POST /api/tools/webdev/border-radius-generator
Content-Type: application/json

{
    "borderRadius": {
        "topLeft": 8,
        "topRight": 8,
        "bottomRight": 8,
        "bottomLeft": 8
    },
    "previewSettings": {
        "width": 200,
        "height": 150,
        "backgroundColor": "#ffffff",
        "borderColor": "#e5e7eb",
        "borderWidth": 2,
        "containerBackground": "#f9fafb"
    }
}
Ready