How To Make An Input Appear Rounded in HTML?

Last Updated : 25 Oct, 2024

To make an input field appear rounded in HTML, you can use the CSS border-radius property. The border-radius property allows you to round the corners of an input box, and you can adjust the value to make the corners more or less rounded.

Using border-radius

The simplest way to create a rounded input field is to apply the border-radius CSS property to an <input> element. The higher the value, the more rounded the corners will be.

Syntax

input {
    border-radius: 15px;
}

Where border-radius can accept values in different formats like pixels (px), percentages (%), or other units. For a fully circular input, you typically apply a high border radius, such as 50%.

Example

HTML

<head>
    <style>
        input {
            border-radius: 15px;
            padding: 10px;
            border: 2px solid #ccc;
            width: 250px;
        }
    </style>
</head>

<body>
    <h2 style="color: green;">GeeksforGeeks</h2>
    <input type="text" placeholder="Enter text">
</body>

Output

In this example, setting border-radius: 15px makes the input field's corners rounded. You can increase the value for a more circular appearance or decrease it for slightly rounded corners.

Alternative Approaches to Make an Input Rounded

Table of Content

Making a Circular Input
Using Different Values for Each Corner

Making a Circular Input

If you want a perfectly circular input, especially for buttons or image inputs, set the border-radius to 50%. This approach works best when the input has equal width and height.

Example

HTML

<style>
    .circular-input {
        width: 50px;
        height: 50px;
           /* Makes the input circular */
        border-radius: 50%;
        border: 1px solid #ccc;
        text-align: center;
    }
</style>

<input type="text" class="circular-input" placeholder="A">

In this case, border-radius: 50% turns the square input into a circle, provided the width and height are equal.

Using Different Values for Each Corner

You can apply different border-radius values to each corner for custom shapes.

Example

HTML

<style>
    .custom-rounded {
        width: 200px;
        padding: 10px;
       /* Different radius for each corner */
        border-radius: 20px 5px 30px 10px;
        border: 1px solid #ccc;
    }
</style>

<input type="text" class="custom-rounded"
     placeholder="Custom rounded input">

This example uses four values to specify different rounding for each corner: top-left, top-right, bottom-right, and bottom-left.

Which Approach is Better in Different Cases?

Standard Rounded Input (border-radius: 15px): Use this for most form elements where you want a subtle rounded effect.
Circular Input (border-radius: 50%): Best for creating circular buttons, profile picture inputs, or custom-shaped elements.
Custom Corner Rounding: Ideal when designing more creative input styles with unique shapes.

ashish1027

Improve

Article Tags :

HTML

How To Make An Input Appear Rounded in HTML?

Using border-radius

Making a Circular Input

Using Different Values for Each Corner

Which Approach is Better in Different Cases?

Similar Reads

Thank You!

What kind of Experience do you want to share?