Visually design any CSS border-radius shape — from simple rounded corners to pills, circles, blobs, and organic forms. Adjust individual corners, toggle elliptical (horizontal/vertical) values, and copy the ready-to-use CSS in one click.

Presets

Preview

Controls

  <!-- Unit toggle -->
  <div class="br-unit-toggle">
    <button class="br-unit-btn active" data-unit="px">px</button>
    <button class="br-unit-btn" data-unit="%">%</button>
  </div>

  <!-- Link toggle -->
  <div class="br-link-row">
    <button class="br-link-btn active" id="br-link-btn">
      <svg viewBox="0 0 20 20"><path d="M10.293 3.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 9H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414zM3 14a1 1 0 100 2h14a1 1 0 100-2H3z"/></svg>
      Link corners
    </button>
    <span id="br-link-label" style="font-size:12px;color:#6b7280;">All corners move together</span>
  </div>

  <!-- Corner sliders -->
  <div class="br-corner-grid" id="br-corner-grid">

    <!-- Top-Left -->
    <div class="br-corner-block" id="br-block-tl">
      <label>Top-Left</label>
      <div class="br-slider-row">
        <span>H</span>
        <input type="range" id="br-tl-h" min="0" max="200" value="0">
        <input type="number" id="br-tl-h-n" min="0" max="200" value="0">
      </div>
      <div class="br-slider-row" id="br-tl-v-row" style="display:none;">
        <span>V</span>
        <input type="range" id="br-tl-v" min="0" max="200" value="0">
        <input type="number" id="br-tl-v-n" min="0" max="200" value="0">
      </div>
      <label class="br-elliptic-toggle"><input type="checkbox" id="br-tl-ell"> Elliptical</label>
    </div>

    <!-- Top-Right -->
    <div class="br-corner-block" id="br-block-tr">
      <label>Top-Right</label>
      <div class="br-slider-row">
        <span>H</span>
        <input type="range" id="br-tr-h" min="0" max="200" value="0">
        <input type="number" id="br-tr-h-n" min="0" max="200" value="0">
      </div>
      <div class="br-slider-row" id="br-tr-v-row" style="display:none;">
        <span>V</span>
        <input type="range" id="br-tr-v" min="0" max="200" value="0">
        <input type="number" id="br-tr-v-n" min="0" max="200" value="0">
      </div>
      <label class="br-elliptic-toggle"><input type="checkbox" id="br-tr-ell"> Elliptical</label>
    </div>

    <!-- Bottom-Right -->
    <div class="br-corner-block" id="br-block-br">
      <label>Bottom-Right</label>
      <div class="br-slider-row">
        <span>H</span>
        <input type="range" id="br-br-h" min="0" max="200" value="0">
        <input type="number" id="br-br-h-n" min="0" max="200" value="0">
      </div>
      <div class="br-slider-row" id="br-br-v-row" style="display:none;">
        <span>V</span>
        <input type="range" id="br-br-v" min="0" max="200" value="0">
        <input type="number" id="br-br-v-n" min="0" max="200" value="0">
      </div>
      <label class="br-elliptic-toggle"><input type="checkbox" id="br-br-ell"> Elliptical</label>
    </div>

    <!-- Bottom-Left -->
    <div class="br-corner-block" id="br-block-bl">
      <label>Bottom-Left</label>
      <div class="br-slider-row">
        <span>H</span>
        <input type="range" id="br-bl-h" min="0" max="200" value="0">
        <input type="number" id="br-bl-h-n" min="0" max="200" value="0">
      </div>
      <div class="br-slider-row" id="br-bl-v-row" style="display:none;">
        <span>V</span>
        <input type="range" id="br-bl-v" min="0" max="200" value="0">
        <input type="number" id="br-bl-v-n" min="0" max="200" value="0">
      </div>
      <label class="br-elliptic-toggle"><input type="checkbox" id="br-bl-ell"> Elliptical</label>
    </div>

  </div><!-- /.br-corner-grid -->
</div><!-- /.br-panel -->

Generated CSS

border-radius: 0;

How to Use

  1. Choose a preset to start from a known shape, or drag the sliders to build from scratch.
  2. Toggle px / % — percentage values are relative to the element’s dimensions; pixels are absolute.
  3. Unlink corners to set each corner independently.
  4. Enable Elliptical on any corner to separate horizontal and vertical radii for organic shapes.
  5. Resize the preview box to see how your radius looks at different aspect ratios.
  6. Copy the CSS and paste it directly into your stylesheet.

Quick Reference: border-radius Syntax

ValueMeaning
border-radius: 8pxAll corners equal
border-radius: 8px 16pxTL+BR / TR+BL
border-radius: 8px 16px 24px 32pxTL TR BR BL (clockwise)
border-radius: 40% 60% / 60% 40%Elliptical (H / V)

Generate box shadows → CSS Box Shadow Generator Build gradients → CSS Gradient Generator Create Flexbox layouts → CSS Flexbox Generator