Making rounded corners in CSS


Today, we’ll look at how to make CSS rounded corners. Yes, you read that correctly. Making use of CSS 3 these days is the best way to achieve visual candies without burning yourself with images. So, in the HTML, we make a div with the class of a box :

<div class="box"></div>

So, you got that right. Now, let’s move to the fun part: CSS 3! So, the technique is fairly simple.  The main property to be used is the border-radius property, whose value determines the roundness of the object you’ll create. For the demonstration purpose, I’ve given the element a background color for you to see the property. So, putting it together, we get the following CSS code:

.box {
padding: 15px;
background: #e2e1d4;
border: 15px solid #eee;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
 border-radius: 10px;
}

The main thing to consider for rounded corners in CSS is the border-radius: value. When you put that and change the value accordingly, you can customize how much of a radius you would want.

Also, try implementing border-radius on other things like images or svg’s and see how that works.

We’ve got the HTML and the CSS code for us making the CSS rounded corners. finally, to put the icing on the cake, I’ve made a demo for you.

Check out this Pen - Demo!

Code brought to you via the cloud by Codepen.

Enter your email address to follow this blog and receive notifications of new posts by email.

Categories: CSS

One thought on “Making rounded corners in CSS

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s