How to Make Rounded Corners in HTML using CSS Border Radius

Rounded corner is one of the most popular HTML designs. It beautify your template, since HTML is typical with box shape. Anyway, rounded corners can make your blog visitors not being bored. 

It uses border-radius 

Border radius is an attribute or element of CSS that rounds any HTML tags such as div, span, h1, etc.. However, you need to add sizes and background color/image/border or anything that shows the visual form of the HTML tag. 

Usually, it looks like this:

#div-tag {

...another code...

background: red;      
border-radius: 10px;

...another code...

}

And that will show something like this:

Of course, I also put height and width attribute (height: 40px, width: 150px). If the div tag above has no size, it won't show anything and the border radius won't be seen.

Well, border radius has simple typing format:

border-radius: top-left-radius top-right-radius bottom-right-radius bottom-left-radius;

Or it can be simplified if you want to implement some radius to all corners:

border-radius: all-radius;

Now just put some creativity to them. Here are some examples of customized CSS border radius:

border-radius: 10px 0 10px 0;

border-radius: 10px 0 10px 10px;

border-radius: 0px 10px 10px 10px;

border-radius: 20px;

Note: Border radius is just an attribute of CSS. You need to implement it inside the style of HTML tag. Don't know what does style of HTML mean? Visit this post.