How to use border-radius to round the corners of inputs, buttons, and divs

Making your forms look less “straight out of the box” is sometimes just as simple as adding a border-radius to things.  In this quick post, I figured that I would show the power of it.In the below pen, there isn’t any fancy CSS.  There is a form with a border, three inputs, and two buttons.  Next to the “username” input and the “password” input, there are font awesome icons but beyond that, there aren’t any libraries of external dependencies.

See the Pen
CSS: Rounded Corners (Before)
by Joe Steinbring (@steinbring)
on CodePen.

It is a pretty straight-forward webform.  Now, let’s see what happens when you add border-radius: 5px; to the form, input class, and button class.

See the Pen
CSS: Rounded Corners (After)
by Joe Steinbring (@steinbring)
on CodePen.

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover Photo by Zosia Korcz on Unsplash ]

Leave a Reply

Your email address will not be published. Required fields are marked *