Interactive Border Radius Tool | HTML, CSS & Javascript

Ever wondered how to get that perfect smooth curve on your buttons or cards with border-radius? Playing with border radii can transform the look of your UI elements. But remembering the exact syntax and experimenting with values can get a little tedious—so why not build your own visual tool?

In this post, we’ll walk through creating a Border Radius Generator using basic web technologies: HTML, CSS, and JavaScript. This is a fun beginner-friendly project and perfect for adding to your frontend portfolio!

🔧 What Does This App Do?

This mini tool lets users adjust the border-radius values of a box using four sliders (Top Left, Top Right, Bottom Right, Bottom Left). As you drag the sliders, you’ll instantly see the box shape change in real-time, and the corresponding CSS code is updated below it. You can then copy the code with a single click!

🧱 Tech Stack

• HTML for the structure

• CSS for styling

• JavaScript for interactivity

  Video Tutorial:

HTML:

The HTML in your code creates the structure of the Border Radius Generator. Here’s what it does:

• It sets up the main title with <h2>.

• It has a container (.wrapper > .container) that holds:

  • A yellow box (#box) that visually shows the border radius changes.

  • A controls section that has 4 sliders—one for each corner of the box. Each slider has a label and a number display (<span>) showing the current value.

  • A code display (#code) that shows the live CSS code for the current border-radius.

  • A Copy CSS button that lets users copy the CSS code to clipboard.

It also links to:

• Google Fonts for the “Poppins” font.

• An external CSS file (style.css) for styling.

• A JavaScript file (script.js) for logic.

<!-- A simple layout with a box, sliders, code output, and copy button -->
<div class="wrapper">
  <h2>Border Radius Generator</h2>
  <div class="container">
    <div class="box" id="box"></div>
    <div class="controls">
      <!-- Four sliders for each corner -->
      <div class="slider-container">
        <label>Top Left:</label>
        <input type="range" id="tl" min="0" max="100" value="0" oninput="updateBorderRadius()" />
        <span id="tlValue">0</span>
      </div>
      <!-- Repeat for other corners... -->
    </div>
    <!-- CSS output -->
    <div class="code" id="code">border-radius: 0px 0px 0px 0px;</div>
    <button onclick="copyCode()">Copy CSS</button>
  </div>
</div>

CSS:

The CSS styles the page and makes it look nice and centered. Here’s what it achieves:

• Body: Sets the background color to a bluish tone (#6366ff) and uses the Poppins font. Centers the content with margins.

• Wrapper: A white box in the center with rounded corners and centered vertically & horizontally using position: absolute and transform.

• Container: Organizes all elements vertically (flex-direction: column) with spacing.

• Box: The yellow square (#ffe054) whose border-radius is changed using the sliders. It also transitions smoothly when values change.

• Sliders: Styled inside .slider-container with spacing and alignment, and each slider shows its value.

• Code display: A gray box styled with monospace font to mimic a code block. It shows the border-radius CSS rule.

• Button: A purple “Copy CSS” button with white text and rounded corners, styled to match the page.

• body {
    font-family: "Poppins", sans-serif;
    text-align: center;
    margin: 20px;
    background-color: #6366ff;
  }
  .wrapper {
    background-color: #ffffff;
    border-radius: 10px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: min(500px, 90vw);
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #ffe054;
    transition: border-radius 0.2s ease-in-out;
  }
  .controls {
    margin: 20px 0 10px 0;
  }
  .slider-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  input[type="range"] {
    width: 150px;
  }
  .code {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    width: 300px;
    font-family: monospace;
  }
  button {
    background-color: #6366ff;
    margin-bottom: 30px;
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 5px;
  }

   

  
  Javascript:

• JavaScript brings your generator to life by making it interactive. Here’s how it works:

  • updateBorderRadius() function:

    • It gets the values from all four sliders (top-left, top-right, bottom-right, bottom-left).

    • It updates the live number next to each slider (tlValue, trValue, etc.).

    • It combines the four values into a border-radius string (e.g., 10px 20px 30px 40px).

    • It applies this new radius to the yellow box (#box.style.borderRadius).

    • It also updates the CSS code snippet shown to the user.

  • copyCode() function:

    • Grabs the CSS code from the display area.

    • Copies it to the clipboard using navigator.clipboard.writeText().

    • Shows an alert message that the code has been copied

    • function updateBorderRadius() {
        let tl = document.getElementById("tl").value;
        let tr = document.getElementById("tr").value;
        let br = document.getElementById("br").value;
        let bl = document.getElementById("bl").value;
      
        document.getElementById("tlValue").textContent = tl;
        document.getElementById("trValue").textContent = tr;
        document.getElementById("brValue").textContent = br;
        document.getElementById("blValue").textContent = bl;
      
        let borderRadius = `${tl}px ${tr}px ${br}px ${bl}px`;
        document.getElementById("box").style.borderRadius = borderRadius;
        document.getElementById(
          "code"
        ).textContent = `border-radius: ${borderRadius}`;
      }
      
      function copyCode() {
        let copyText = document.getElementById("code").textContent;
        navigator.clipboard.writeText(copyText);
        alert("Copied to clipboard");
      }

       

In Simple Terms:

You’ve created a mini web app that:

• Visually shows how border-radius works.

• Lets users adjust corners with sliders.

• Instantly shows the CSS code for those changes.

• Allows users to copy that code with one click.