Round border corners
-
<style>
#container{
border:#996666 hidden thin;
width: 650px;
}
.rndtop{
background:url(images/toprht_bor.gif) no-repeat right top;
}
.rndbottom{
background:url(images/botrht_bor.gif) no-repeat right top;
}
.rndbottom img {
display:block;
}
.t{
background:url(images/dot.gif) 0 0 repeat-x;
}
.b {
background:url(images/dot.gif) 0 100% repeat-x;
}
.l {
background:url(images/dot.gif) 0 0 repeat-y;
}
.r {
background:url(images/dot.gif) 0 100% repeat-y;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div class="t"><div class="b"><div class="l"><div class="r">
<div class="rndtop"><img src="images/toplef_bor.gif" alt="" width="17" height="17" /> </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<div class = "rndbottom"><img src="images/botlef_bor.gif" alt="" width="17" height="17" /> </div>
</div></div></div></div></div>
</div>
</body>
</html>this is fine but I end up missing the Right side of my border (using repeat dot image) and the bottom border(image) extends past my bottom right corner.??
I would be very greatful for any answers or direction.
Many thanks
-
It looks to me that your example is very similar to the one used by Stu on his site, css play (http://www.cssplay.co.uk/boxes/snazzy2.html).
-
thank you, thank you. very useful source of info.
Post a reply
CSS forum discussion
-
CSS Articles
by Rohitnath (3 replies)
-
How to Create Scrollable DataGridView
by fravimal dev (8 replies)
-
Dynamic image map for asset management
by nsanyi23 (3 replies)
-
Streaming web video
by kruelintent (0 replies)
-
HTML vs HTM
by tung148 (15 replies)
Quick links
Recent activity
- arif ahmad replied to How to receive data in web ...
- William Thompson replied to What is the name of the Win...
- Sameera Piyadigamage replied to Point of Sale Developers: H...
- Scott Carline replied to 4 x C# Developers for large...
- Rajendra Dhakal replied to Restore SQL Server text dat...
- cloud rainda replied to How to convert between TS f...
Enter your message below
Sign in or Join us (it's free).