CSS Rounded Corners

Rounded Boxes Or Rounded Corners

Not quite sure what the difference between the two are but here for your pleasure is a collection of those rounded thingy's.

You will need these four corners so right click and save them to your computer.

Find out more about this little gem from Kalsey.Com

Magpies feed mainly on small insects and other animals that live in or just under the ground, such as worms, beetles, ants, spiders, frogs, lizards and even carrion. Magpies have a complex social structure. They form two main associations - tribes and flocks. Tribes consist of two to 10 birds of both sexes, which occupy a territory of up to eight hectares.

CSS

.roundcont {
width: 480px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 20px 0 20px;
}
.roundtop {
background: url(images/tr.gif) no-repeat top right;
}
.roundbottom {
background: url(images/br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

HTML

Snazzy Borders

Not an image in sight, check it out at CSS Play. Another variation of this but with a caption head can be found here

Just a small note. If you copy the code below, the box will be the full width of your page. I made the box smaller by inserting this small piece of code.

CSS

#xsnazzywidth {width:470px;}

HTML

<div id="xsnazzywidth"> snazzy code goes here </div>

Snazzy Borders

Based on Nifty Corners By Alessandro Fulciniti
http://pro.html.it/esempio/nifty/

Rounded borders without images

COOL FACTS

Black-billed Magpies have some interesting feeding behaviors! They feed by flipping over cow manure looking for insects, eat ticks and other parasites off of large mammals including moose and bison, will steal food from predators. They also hoard food when there is an excess.

CSS

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}

HTML

<div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <h2>Rounded borders without images</h2> <p>Text Goes Here</p> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>

•

Australian Magpie
Gymnorhina tibicen

Sweet-voiced magpies are the black and white minstrels of Australia. They have adapted successfully to urban and agricultural areas. Beautiful carolling, a relish for eating many harmful insect pests and the bird's bold nature have made the magpie popular with the suburban gardener and other bird lovers. Australian magpies are often found in relatively open gardens, and sometimes become quite tame in suburban areas.

CSS

div.rounded-box {
position:relative;
margin: 10px;
}
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFFFFF; 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; 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: 10px; color:#000;
}

HTML

TEXT GOES HERE

</div> </div>

That's your lot, check out this place if your still interested in rounded boxes.