Logo

Border Radius Generator

Create beautiful border-radius CSS with real-time preview and multiple output formats

Settings

Corner Values

px
px
px
px

Presets

Preview

border-radius: 16px 16px 16px 16px

CSS Code

border-radius: 16px 16px 16px 16px;

Corner Values

Top Left: 16px
Top Right: 16px
Bottom Right: 16px
Bottom Left: 16px

Related Tools

API Testing Tool

Test REST APIs, debug requests, and generate code snippets with this comprehensive API testing tool

Typography System Designer

Design complete typography systems with instant previews, palettes, and accessibility checks.

Markdown to HTML

Convert Markdown text to clean HTML with options for sanitization and preview

Regex Tester

Build, test, and debug regular expressions with live highlighting, replacement previews, and match analysis

HTML Minifier & Beautifier

Compress and optimize HTML code by removing whitespace, comments, and redundant attributes. Includes beautify mode.

CSS Minifier & Beautifier

Compress and optimize your CSS code by removing whitespace, comments, and redundant attributes. Includes beautify mode.

How to Use the Border Radius Generator

Getting Started

The border-radius generator allows you to create custom CSS border-radius values with real-time preview. Here's how to use it effectively:

  • Adjust Individual Corners: Use the sliders or number inputs to set values for each corner independently
  • Sync Corners: Enable "Sync All Corners" to apply the same value to all corners simultaneously
  • Change Units: Switch between px, rem, em, %, vw, and vh units depending on your use case
  • Use Presets: Quick access to common border-radius values like rounded, pill, or circle shapes

Border Radius Tips

  • Small values (2-8px): Perfect for subtle corners on buttons and input fields
  • Medium values (12-24px): Great for cards and containers
  • Large values (32px+): Create dramatic rounded effects for modern designs
  • Percentage values: Use 50% for perfect circles or ellipses
  • Asymmetric values: Create unique shapes by setting different values for each corner

Common Use Cases

Rounded Buttons

Use 6-8px for standard buttons, or 9999px for pill-shaped buttons.

  • Standard: 8px border-radius
  • Pill button: 9999px border-radius

Card Components

Medium values work best for cards and content containers.

  • Subtle cards: 12px border-radius
  • Modern cards: 16-24px border-radius

Avatar Images

Create perfect circles for profile pictures and avatars.

  • Circle avatar: 50% border-radius
  • Squared avatar: 8-12px border-radius

CSS Output Formats

  • Shorthand: Most common format - border-radius: 16px;
  • Individual: Separate properties for each corner
  • Tailwind CSS: Utility classes for Tailwind projects
  • Copy & Paste: One-click copying to clipboard for easy integration

Pro Tips

  • Use responsive units like % or rem for better scalability across devices
  • Test border-radius with different background colors to ensure visual consistency
  • Combine with box-shadow for enhanced depth and visual hierarchy
  • Consider accessibility - very rounded corners may affect readability for some users
  • Use the preview to test how your border-radius looks with actual content