OneKitTools logoOneKitTools
Back to Developer

CSS Border Radius Generator

Visual border-radius editor with corner controls, linked mode, presets, and CSS output

About CSS Border Radius Generator

Design CSS border-radius values with a visual editor — adjust each corner independently, use presets, and copy the CSS.

How to use CSS Border Radius Generator

  1. 1Drag the corner sliders or enter exact values for each corner.
  2. 2Toggle 'Link All Corners' to adjust all corners simultaneously.
  3. 3Choose a unit (px or %) for precise control.
  4. 4Try presets like Pill, Circle, or Blob for instant shapes.
  5. 5Copy the CSS output and paste it into your stylesheet.

Tips

  • Percentage-based values (50%) create perfect circles on square elements regardless of size.
  • The Blob preset uses advanced 8-value border-radius for organic, asymmetric shapes.
  • Slight border-radius (4-8px) on cards and buttons makes UI feel modern without being too rounded.

Related tools

OneKitTools TeamUpdated 2.21.4