let’s break down CSS Rounded Borders step-by-step.

1. What is a Rounded Border?

Rounded borders are created using the border-radius property.
Instead of sharp corners, it curves the edges of an element.

2. Syntax

border-radius: value;
  • value can be:
    • px → pixels (absolute curve size)
    • % → percentage (relative to element size)
    • em/rem → relative to font size

3. Examples

(a) Same radius on all corners

div {
  border: 2px solid black;
  border-radius: 20px;
}

(b) Different radius for each corner

div {
  border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */
}

(c) Elliptical corners

You can use two values separated by / for horizontal & vertical radii:

div {
  border-radius: 50px / 20px;
}

(d) Perfect circle

If width = height and border-radius is 50%, it becomes a circle:

img {
  border-radius: 50%;
}

4. Special Notes

  • border-radius does not require a border to work — it clips the background and content too.
  • Works with background images, gradients, and shadows.
  • Can be combined with overflow: hidden; to hide content outside the curve.

5. Live Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 150px;
      height: 100px;
      margin: 10px;
      border: 3px solid #333;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
    }
    .radius-20 { border-radius: 20px; }
    .radius-circle { border-radius: 50%; }
    .radius-diff { border-radius: 10px 30px 50px 70px; }
    .radius-ellipse { border-radius: 50px / 20px; }
  </style>
</head>
<body>
  <div class="box radius-20">20px</div>
  <div class="box radius-circle">Circle</div>
  <div class="box radius-diff">Diff</div>
  <div class="box radius-ellipse">Ellipse</div>
</body>
</html>

live rounded border playground :

here’s your Interactive Rounded Borders Playground 🎯
You can control each corner’s radius individually (Top-Left, Top-Right, Bottom-Right, Bottom-Left) with sliders and see live updates, plus the generated CSS code.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Rounded Borders Playground</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      text-align: center;
      padding: 20px;
    }
    .preview {
      width: 250px;
      height: 150px;
      margin: 20px auto;
      background: white;
      border: 3px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .controls {
      background: #fff;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      display: inline-block;
      text-align: left;
    }
    label {
      font-weight: bold;
      display: inline-block;
      width: 130px;
    }
    .code-box {
      background: #222;
      color: #0f0;
      padding: 10px;
      margin-top: 15px;
      font-family: monospace;
      border-radius: 5px;
      text-align: left;
    }
  </style>
</head>
<body>

<h1>🎨 CSS Rounded Borders Playground</h1>

<div class="preview" id="preview-box">Preview</div>

<div class="controls">
  <p>
    <label>Top-Left Radius:</label>
    <input type="range" id="tl" min="0" max="125" value="20">
    <span id="tl-val">20px</span>
  </p>
  <p>
    <label>Top-Right Radius:</label>
    <input type="range" id="tr" min="0" max="125" value="20">
    <span id="tr-val">20px</span>
  </p>
  <p>
    <label>Bottom-Right Radius:</label>
    <input type="range" id="br" min="0" max="125" value="20">
    <span id="br-val">20px</span>
  </p>
  <p>
    <label>Bottom-Left Radius:</label>
    <input type="range" id="bl" min="0" max="125" value="20">
    <span id="bl-val">20px</span>
  </p>
</div>

<div class="code-box" id="css-code">
border-radius: 20px 20px 20px 20px;
</div>

<script>
  const preview = document.getElementById("preview-box");
  const cssCode = document.getElementById("css-code");

  const inputs = {
    tl: document.getElementById("tl"),
    tr: document.getElementById("tr"),
    br: document.getElementById("br"),
    bl: document.getElementById("bl")
  };

  const vals = {
    tl: document.getElementById("tl-val"),
    tr: document.getElementById("tr-val"),
    br: document.getElementById("br-val"),
    bl: document.getElementById("bl-val")
  };

  function updateRadius() {
    let tl = inputs.tl.value + "px";
    let tr = inputs.tr.value + "px";
    let br = inputs.br.value + "px";
    let bl = inputs.bl.value + "px";

    preview.style.borderRadius = `${tl} ${tr} ${br} ${bl}`;
    vals.tl.textContent = tl;
    vals.tr.textContent = tr;
    vals.br.textContent = br;
    vals.bl.textContent = bl;

    cssCode.innerHTML = `border-radius: ${tl} ${tr} ${br} ${bl};`;
  }

  Object.values(inputs).forEach(input => {
    input.addEventListener("input", updateRadius);
  });

  updateRadius();
</script>

</body>
</html>

How it works

  • 4 sliders → control each corner individually.
  • Preview box → shows live radius changes.
  • CSS code output → ready to copy.

I can extend this so you can also toggle between:

  • Pixels (px)
  • Percentages (%)
  • Elliptical radius (/)
<!DOCTYPE html>
<html>
<head>
  <title>Advanced CSS Rounded Borders Playground</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      text-align: center;
      padding: 20px;
    }
    .preview {
      width: 250px;
      height: 150px;
      margin: 20px auto;
      background: white;
      border: 3px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .controls {
      background: #fff;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      display: inline-block;
      text-align: left;
    }
    label {
      font-weight: bold;
      display: inline-block;
      width: 170px;
    }
    .code-box {
      background: #222;
      color: #0f0;
      padding: 10px;
      margin-top: 15px;
      font-family: monospace;
      border-radius: 5px;
      text-align: left;
      white-space: pre;
    }
    .unit-toggle {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<h1>🎨 Advanced CSS Rounded Borders Playground</h1>

<div class="preview" id="preview-box">Preview</div>

<div class="controls">
  <div class="unit-toggle">
    <label>Unit:</label>
    <select id="unit">
      <option value="px">Pixels (px)</option>
      <option value="%">Percentage (%)</option>
    </select>
  </div>

  <h3>Horizontal Radii</h3>
  <p><label>Top-Left:</label> <input type="range" id="tl-h" min="0" max="125" value="20"> <span id="tl-h-val">20px</span></p>
  <p><label>Top-Right:</label> <input type="range" id="tr-h" min="0" max="125" value="20"> <span id="tr-h-val">20px</span></p>
  <p><label>Bottom-Right:</label> <input type="range" id="br-h" min="0" max="125" value="20"> <span id="br-h-val">20px</span></p>
  <p><label>Bottom-Left:</label> <input type="range" id="bl-h" min="0" max="125" value="20"> <span id="bl-h-val">20px</span></p>

  <h3>Vertical Radii</h3>
  <p><label>Top-Left:</label> <input type="range" id="tl-v" min="0" max="125" value="20"> <span id="tl-v-val">20px</span></p>
  <p><label>Top-Right:</label> <input type="range" id="tr-v" min="0" max="125" value="20"> <span id="tr-v-val">20px</span></p>
  <p><label>Bottom-Right:</label> <input type="range" id="br-v" min="0" max="125" value="20"> <span id="br-v-val">20px</span></p>
  <p><label>Bottom-Left:</label> <input type="range" id="bl-v" min="0" max="125" value="20"> <span id="bl-v-val">20px</span></p>
</div>

<div class="code-box" id="css-code">
border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
</div>

<script>
  const preview = document.getElementById("preview-box");
  const cssCode = document.getElementById("css-code");
  const unitSelect = document.getElementById("unit");

  const inputs = {
    "tl-h": document.getElementById("tl-h"),
    "tr-h": document.getElementById("tr-h"),
    "br-h": document.getElementById("br-h"),
    "bl-h": document.getElementById("bl-h"),
    "tl-v": document.getElementById("tl-v"),
    "tr-v": document.getElementById("tr-v"),
    "br-v": document.getElementById("br-v"),
    "bl-v": document.getElementById("bl-v")
  };

  const vals = {
    "tl-h": document.getElementById("tl-h-val"),
    "tr-h": document.getElementById("tr-h-val"),
    "br-h": document.getElementById("br-h-val"),
    "bl-h": document.getElementById("bl-h-val"),
    "tl-v": document.getElementById("tl-v-val"),
    "tr-v": document.getElementById("tr-v-val"),
    "br-v": document.getElementById("br-v-val"),
    "bl-v": document.getElementById("bl-v-val")
  };

  function updateRadius() {
    let unit = unitSelect.value;

    let tlH = inputs["tl-h"].value + unit;
    let trH = inputs["tr-h"].value + unit;
    let brH = inputs["br-h"].value + unit;
    let blH = inputs["bl-h"].value + unit;

    let tlV = inputs["tl-v"].value + unit;
    let trV = inputs["tr-v"].value + unit;
    let brV = inputs["br-v"].value + unit;
    let blV = inputs["bl-v"].value + unit;

    preview.style.borderRadius = `${tlH} ${trH} ${brH} ${blH} / ${tlV} ${trV} ${brV} ${blV}`;

    Object.keys(vals).forEach(key => {
      vals[key].textContent = inputs[key].value + unit;
    });

    cssCode.textContent = `border-radius: ${tlH} ${trH} ${brH} ${blH} / ${tlV} ${trV} ${brV} ${blV};`;
  }

  Object.values(inputs).forEach(input => {
    input.addEventListener("input", updateRadius);
  });
  unitSelect.addEventListener("change", updateRadius);

  updateRadius();
</script>

</body>
</html>

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *