Ever wonder how to make the rounded corners in your web site?
I've read about using images to make it, and some need javascripts. You can use ASP.NET AJAX tool for this rounded corners box. I just found this, where you don't need to use any images nor javascript, and it works.
Copy this to your css file. e.g. test.css
1: /* ROUNDED CORNERS - Grey border */
2: #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
3: #xsnazzy h1 {font-size:2.5em; color:#fff;}
4: #xsnazzy h2 {font-size:2em;color:#06a; border:0;}
5: #xsnazzy p {padding-bottom:0.5em;}
6: #xsnazzy h2 {padding-top:0.5em;}
7: #xsnazzy {background: transparent; margin:1em;}
8: 9: .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
10: .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
11: .xb1, .xb2, .xb3 {height:1px;}
12: .xb2, .xb3, .xb4 {border-left:1px solid #ccc; border-right:1px solid #ccc;}
13: .xb1 {margin:0 5px; background:#ccc;}
14: .xb2 {margin:0 3px; border-width:0 2px;}
15: .xb3 {margin:0 2px;}
16: .xb4 {height:2px; margin:0 1px;}
17: 18: .xboxcontent
19: {20: display:block;
21: border:0 solid #ccc;
22: border-width:0 1px;
23: }Copy this to the HTML file:
1: <div id="xsnazzy">
2: <b class="xtop">
3: <b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
4: </b>
5: <div class="xboxcontent">
6: <p><h2>This is an example of rounded corner box without using images or javascript.</h2></p>
7: </div>
8: <b class="xbottom">
9: <b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
10: </b>
11: </div>
In order to use the css file, you need to include this line of code in the head block.
1: <head>
2: <link href="Test.css" rel="stylesheet" type="text/css" />
3: <title>Rounded Corners example</title>
4: </head>
Then, you'll get the rounded corners box.
More information regarding the rounded corners:
* Snazzy Borders - This is where I got the codes for my example.
* Spiffy Corners - Another way to create anti-aliased corners without using images or javascript.
* CSS Rounded Corners 'Roundup' - A collection of techniques to create boxes with rounded corners using CSS. Here you'll find many different techniques.
* Nifty Corners - This technique creates rounded corners without images, but with javascript.
Great info but I have one huge problem and need help!!!!!!!!
ReplyDeleteI can't seem to get the "background: ...url(whatever.gif)" right. I have tried using the 'images' folder in my design folder as target but nothang!
Pls help somebody!
hi math,
ReplyDeletesorry for the late reply.
if you have placed the image 'whatever.gif' inside the 'images' folder, perhaps you should declare as
background:url('images/'whatever.gif');
You can also declare like this:
background-image:url('images/'whatever.gif');