This is a tutorial for creating a fixed website layout with 4 rounded corners. We will be using HTML and CSS only, this method is unique becasue no images are nessacery for the corners. Let's begin. First of all create a new HTML page, let's call it index.html . Let's add the "default" tags to the page. <html> <head></head> <body></body> </html> Code (markup): Now here's the unique part, add the following code into the <body>: <!-- ROUNDED CORNERS BY www.family-guy-world.com --> <div class="rounded-box"><div class="top-left-corner"><div class="top-left-inside">•</div></div><div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div><div class="top-right-corner"><div class="top-right-inside">•</div></div><div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div><div class="box-contents"> <!-- END ROUNDED CORNERS BY www.family-guy-world.com --> YOUR CONTENT IN THIS SECTION <!-- Keep these closing DIV tags! --> </div> </div> <!-- Keep the above closing DIV tags! --> Code (markup): Right, that's the tricky bit done! Now all you have to do is add the css. In the <head> section add the following: <style type="text/css"> /* Rounded corners from www.family-guy-world.com */ body { background-color: #FFC500; margin: 0px; padding: 0px; font-family: arial; } div.rounded-box { position:relative; width: 9em; background-color: #0985F4; margin: auto; width: 950px; height: 700px; } div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner { position:absolute; width:20px; height:20px; background-color: #FFC500; overflow:hidden; } div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside { position:relative; font-size:150px; font-family:arial; color:#0985F4; line-height: 40px; } div.top-left-corner { top:0px; left:0px; } div.bottom-left-corner {bottom:0px; left:0px;} div.top-right-corner {top:0px; right:0px;} div.bottom-right-corner {bottom: 0px; right:0px;} div.top-left-inside {left:-8px;} div.bottom-left-inside {left:-8px; top:-17px;} div.top-right-inside {left:-25px;} div.bottom-right-inside {left:-25px; top:-17px;} div.box-contents { position: relative; padding: 8px; color:#000; } /* KEEP ALL THE ABOVE CSS */ </style> Code (markup): Now save your page. Open it up and you will see a page with a fixed width of 950px; and rounded corners! Want to change the colours? --- To change the outer backgound colour find: body { background-color: #FFC500; margin: 0px; padding: 0px; font-family: arial; } Code (markup): and div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner { position:absolute; width:20px; height:20px; background-color: #FFC500; overflow:hidden; } Code (markup): ----- Replace #FFC500 with a colour of your choice. To change the main background colour find: div.rounded-box { position:relative; width: 9em; background-color: #0985F4; margin: auto; width: 950px; Code (markup): ---- Replace #0985F4 with a colour of your choice There you go! A fixed page layout with rounded corners! Note: You can change the width and height to anything you want but the default used here is universally recomended. The layout will remain in the centre of the browser whatever happens. That's why it is called a fixed layout! If you like this tutorial please add to my reputation, it's much appreciated.