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: