Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pure CSS Rounded Inputs

  • Last Updated : 27 Sep, 2021

Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.

Pure CSS provides a “pure-input-rounded” class name is used to display a form control with rounded corners. It is generally used for search indexes.

Syntax:

<input type="input-type" class="pure-input-rounded">  

Example: In this example, we have a form tag with class pure-form as a parent tag. Inside the parent form tag, we have an input tag with the class pure-input-rounded for rounded input boxes. We can also create submit button with rounded corners using the same syntax by making input type as submit.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <div>
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
  
            <h2>Rounded Input</h2>
  
            <form class="pure-form">
                <input type="text" 
                    class="pure-input-rounded">
                  
                <br /><br />
                <input type="password" 
                    class="pure-input-rounded">
                      
                <br /><br />
                <input type="submit" 
                    class="pure-input-rounded" 
                    style="background-color:green;
                    color:white;" />
            </form>
        </div>
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!