Some of us usually put a button with rounded corners on our web pages. We take the whole button as an image and insert it into the page. But if we have many such buttons, then the size of the page is increased a lot. So, here I have a trick by which you can cut small parts of the button and let CSS generate the whole button. I’ve cut the four small rounded corners into four different images and taken them as a background in four divs and applied certain styles to those divs. So, the HTML goes like this. <body> <div class = "container"> <div class = "cornerbl"><div class = "cornerbr"><div class = "cornertl"><div class = "cornertr"> </div></div></div></div> </div> </body> And the CSS goes like this: <style type = "text/css"> .container { width:100px; height:30px; background-color: #0c0c0c; } .cornerbl { width:100%; height:100%; background: url(cornerbl.gif) 0 100% no-repeat; } .cornerbr { width:100%; height:100%; background: url(cornerbl.gif) 100% 100% no-repeat; } .cornertl { width:100%; height:100%; background: url(cornerbl.gif) 0 0 no-repeat; } .cornertr { width:100%; height:100%; background: url(cornerbl.gif) 100% 0 no-repeat; } </style> Source: http://www.designpal.org/2008/07/06/making-a-button-with-rounded-corners/
Good job, but I am little confused on where to put the contents of the button? Say you wanted the button to say: Submit, would you put it after the container or what?