Wednesday, June 3, 2009

HTML - rounded div corners with CSS (no images)

I am doing an html website and the design I came up with has one rounded corner. I come from way back when we used to use tables and use images to get rounded corners. Although I haven't worked much in HTML in a while, I know the norm now is to use divs instead of tables... so I did some digging and found this:

http://www.html.it/articoli/nifty/index.html

Using stripes with different margins to get a rounded corner look. So clever! It makes total sense, but I would have never thought to do this. To get my ONE rounded corner I had to make some slight modifications. A code snip is below.




<style type="text/css">
body{background-color: #FFF;
margin-right:0; padding-right:0;
margin-left:0; padding-left:0;
font: 100.01% Verdana,Arial,sans-serif}
p{margin: 0 10px}
div#nifty{ margin-left:300px; margin-top:35px; background: #FF0000;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #FF0000}
b.r1{margin-left: 5px; margin-top: 0;}
b.r2{margin-left: 3px; margin-top: 0;}
b.r3{margin-left: 2px; margin-top: 0;}
b.rtop b.r4, b.rbottom b.r4{margin-top:0; margin-left:1px; height:2px}
</style>
</head>

<body>

<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<div style="height:200px"/>

</div>

</body>

No comments: