Create a Border Radius Generator Using HTML, CSS & JavaScript | Mini Frontend Tool

Alizeh Codes July 04, 2025

In this mini project, I created a simple Border Radius Generator using HTML, CSS, and JavaScript. It’s a great beginner-friendly tool that helps users visually adjust border-radius values and instantly copy the CSS code.


JavaScript project for beginners


🔧 What This Project Does:

Lets users control each corner’s radius (Top-Left, Top-Right, Bottom-Left, Bottom-Right)

Shows a live preview of the box with updated border radius

Displays the CSS code for quick copy-paste



📹 Watch the Demo Video:



💻 Tech Stack:

HTML for structure

CSS for styling and responsive layout

JavaScript for interactivity and real-time updates



📌 Use Cases:

Perfect for UI/UX designers and developers to test and copy border radius values

Great for beginner frontend portfolios

Helpful tool for styling inspiration



Source Code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Radius Generator</title>
    <!-- stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <h2>Border Radius Generator</h2>
        <div class="container">
            <div class="box" id="box"></div>
            <div class="controls">
                <!-- Four slider 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 class="slider-container">
                    <label>Top Right:</label>
                    <input type="range" id="tr" min="0" max="100" value="0" oninput="updateBorderRadius()">
                    <span id="trValue">0</span>
                </div>

                <div class="slider-container">
                    <label>Bottom Left:</label>
                    <input type="range" id="bl" min="0" max="100" value="0" oninput="updateBorderRadius()">
                    <span id="blValue">0</span>
                </div>

                <div class="slider-container">
                    <label>Bottom Right:</label>
                    <input type="range" id="br" min="0" max="100" value="0" oninput="updateBorderRadius()">
                    <span id="brValue">0</span>
                </div>
            </div>
            <!-- CSS Output  -->
            <div class="code" id="code">border-radius: 0px 0px 0px 0px;</div>
            <button onclick="copyCode()">Copy CSS</button>
        </div>
    </div>

    <!-- script -->
    <script src="script.js"></script>
</body>
</html>


CSS:

body{
    background-color: #1d85dd;
    font-family: sans-serif;
    text-align: center;
    margin: 20px;
}
.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: 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;
    cursor: pointer;
}


JavaScript:

function updateBorderRadius(){
    let tl = document.getElementById("tl").value;
    let tr = document.getElementById("tr").value;
    let bl = document.getElementById("bl").value;
    let br = document.getElementById("br").value;

    document.getElementById("tlValue").textContent = tl;
    document.getElementById("trValue").textContent = tr;
    document.getElementById("blValue").textContent = bl;
    document.getElementById("brValue").textContent = br;

    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");
}



💬 Your Feedback?

💡 Feel free to modify or improve this project. It’s great for learning JavaScript DOM manipulation and UI building. 

Let me know what you think or suggest new UI tools I should build next!



🔖 Tags:

#html #css #javascript #webdev #frontend #ui #beginners #uiprojects


Thanks for reading! 😊 Don’t forget to share and subscribe to my YouTube channel for more mini frontend projects!



Tags:

Post a Comment

0 Comments