HTML5 Timeline History – Inforgraphics

How to make rounded corners and other shapes like circle, heart, triangle etc using CSS3
If you are designing/developing a website, then basic elements will be HTML and CSS for sure apart from other biggie like jQuery, PHP/Perl blah blah. And page load into the browser also matters which is being determined by the size of images being used, js files, css files etc.

I still remember those days when I used to put images for every small shape like circle, rectangle, chat bubble, quotes, rounded corners etc. But using CSS3 you can not only save disk space but web space too!
There are few attributes in CSS through which you can do amazing stuffs. One of them is “border-radius”.  This property allows us to add rounded corners to elements.

The border-radius property is a shorthand property for setting the four border-*-radius properties which mean you can specifically use top-left, top-right, bottom-right, bottom-left instead of that *

Its usual syntax is:
[css]
border-radius: 1-4 length|% / 1-4 length|%;     /* Here 1-4 means four corners 😀 */
[/css]
Either we can use length that we define using em or px or we can use percentage. How we can achieve various shape using this property. Let’s see rounded corner stuff first.
CSS Code:
[css]
<style type="text/css">
  #round-corner{
  padding:10px 40px;
  background-color:#FF0000;
  width:300px;
  border-radius:25px; 
}
</style>
 [/css]
You could write border-raidus in em or percentage too even.
Something like:
 [css]
border-radius: 2em 1em 4em / 0.5em 3em;
[/css]
which is equivalent to:
[css]
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
 [/css]
 
Then write below code inside body tag:
 [css]
<div id="round-corner">Isn't it amazing to use border-radius property instead of rounded images?</div>
 [/css]

How the browsers interpret which em for whom if we missed any of those four corners?
 
Answer is simple, follow this rule:
The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

 
How about having circle or oval shape using border-radius property?
You just need to include height, width in proper ratio and then  border-radius would do the rest. What I meant is :
[css]
<style type="text/css">
#circle {
                height: 70px;
                width: 70px;
                border-radius: 35px;  /* or 50% */
                background-color: #FF0000;
}
 
#oval {
                width: 200px;
                height: 100px;
                background: #FF0000;
                border-radius: 100px / 50px;   /* or 50% */
}
</style>
 [/css]

Please check this link for fully working code and resulted shapes from these code snippets.
 
One task for you people
Can you make these shapes using border-radius property?

• Triangle with different point of origins
• Circle with two different colors , one quarter filled with x color and other quarter filled with y alternatively
• Parallelogram/Trapezoid
• Bookmark-ribbon with one side red color and other side black color (Hint: it can be done without border-radius)

 
Note: It may not work in some older version of browsers specially IE! So, Test these codes in chrome or Firefox or safari