Blaze UI Input Group Rounded

Blaze UI is a framework-free open-source UI toolkit. It provides a great foundation for building scalable websites faster. Blaze UI comes with a lot of pre-styled components and many utilities so that developers don't have to build everything from scratch.

In this article, we will be seeing Blaze UI Input Group rounded. There are three classes that are used to make an input group rounded. These classes are mentioned below.

Blaze UI Input Group Rounded Classes:

• c-input-group--rounded: This class is used to make both ends of the input group rounded.
• c-input-group--rounded-left: This class is used to make the left end of the input group rounded.
• c-input-group--rounded-right: This class is used to make the right end of the input group rounded.

Syntax:

<div class="c-input-group c-input-group--rounded">
 ...
</div>

Example 1: The below example shows the use of the c-input-group--rounded class to make both ends of an input group rounded.

Output:            

👁 Image

Example 2: The below example uses the c-input-group--rounded-left and c-input-group--rounded-rightclasses, to make the left and the right ends rounded respectively.

Output:

👁 Image

Reference: https://www.blazeui.com/components/inputs/