advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

zensir on 08/16/06


Tagged

css corners ROUNDED


Versions (?)


Who likes this?

81 people have marked this snippet as a favorite

jonhenshaw
designerd
joernba
postNuKe
aurele
panatlantica
horizens
whistlerpeak
nutella
tenorito
smilylion
visualAesthetic
rmaltete
djustnl
Hollow
koncept
Poltras
fantomex
icarus
Phoenix
happolati
IanLewis
manub
Runtheball
tmarkiewicz
fael
tidbit
rich13
swiggy
shovanjoshi
marcoba
vali29
kellyharding
KyleLee
dMeilleur
copyleft
Victoor
yarvin
hariharank12
marteki
m-alo
Leech
abhisek
Winkyboy
i80706
kiliksun
sp1r1t
visuallyspun
tome2k
mbcdg
jongmr
madrid
pornolizer
snucko
seekup00
avioli
sosof
jatkins
wbowers
oshouip
gevika
fernandaparisi
paullorentzen
rovision
llbbl
cataua
pagetoscreen
nilsr
stylz
mrjthethird
Theanthrope
alvaroisorna
JimiJay
ischenkodv
mmccrack
arturo
jeradhill
wiired
stasiaholdren
JustinCrossman
shii


CSS ROUNDED CORNERS

Published in: CSS 

Plain TextExpand 
  1. CSS
  2.  /* set millions of background images */
  3. .rbroundbox { background: url(nt.gif) repeat; }
  4. .rbtop div { background: url(tl.gif) no-repeat top left; }
  5. .rbtop { background: url(tr.gif) no-repeat top right; }
  6. .rbbot div { background: url(bl.gif) no-repeat bottom left; }
  7. .rbbot { background: url(br.gif) no-repeat bottom right; }
  8.  
  9. /* height and width stuff, width not really nessisary. */
  10. .rbtop div, .rbtop, .rbbot div, .rbbot {
  11. width: 100%;
  12. height: 7px;
  13. font-size: 1px;
  14. }
  15. .rbcontent { margin: 0 7px; }
  16. .rbroundbox { width: 50%; margin: 1em auto; }
  17.  
  18.  
  19.  
  20. HTML
  21.  
  22. <div class="rbroundbox">
  23. 	<div class="rbtop"><div></div></div>
  24. 		<div class="rbcontent">
  25. 			<p>Lorem ipsum dolor sit amet, 
  26. 			consectetuer adipiscing elit. Duis 
  27. 			ornare ultricies libero. Donec 
  28. 			fringilla, eros at dapibus fermentum,
  29. 			tellus tellus auctor erat, vitae porta 
  30. 			magna libero sed libero. Mauris sed leo. 
  31. 			Aliquam aliquam. Maecenas vestibulum.</p>
  32. 		</div><!-- /rbcontent -->
  33. 	<div class="rbbot"><div></div></div>
  34. </div><!-- /rbroundbox -->

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: SmpleJohn on June 9, 2008

Better: http://www.curvycorners.net/

Posted By: Malte on January 31, 2008

for full rezisable rounded corners: http://snipplr.com/view/4861/advanced-css-rounded-corners/

Posted By: zensir on August 28, 2006

this is a good one guy and it'll be fast to apply, notice that you should create the images first!

You need to login to post a comment.