CSS Rounded Corners 'Roundup'


	CSS Rounded Corners 'Roundup'

travislaborde

11-8-2006 8:01 AM

1282 views

tags:

programming, css

2 Comments |

Add a Comment

11-8-2006 10:09 AM

ghiberti

I've used 'nifty corners' - nice library

7-31-2008 2:48 PM

wiccantexan

Oh, gods, I just figured out how to use a free template with div's in it. Don't confuse me any more!

Login to Comment. Not a member yet? Sign up

Future 'Top 10' Hot Careers in 2012

Sordid Lives

How to Understand the Financial Crisis in ...

Sql Server and .NET Min and Max Date Ranges

Fav Programmer Cartoons

Custom Toyota MR2 carputer

More clips from travislaborde

Very Creepy Old Ads

Rubik's Cube Solver

DotNetNuke 5.0: Now with jQuery

Today's Top Clips

visit the Top Clips page

View the Top Clips from November 8, 2006

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/3f7e9f6f-49d5-4dbb-a5a5-c9526752cd9e/884B7E58-C316-40B3-B54C-4291D451AD9A/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.smileycat.com/miaow/archives/000044.html" href="http://www.smileycat.com/miaow/archives/000044.html" style="font-size: 11px;">www.smileycat.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><H1 id="a000044">CSS Rounded Corners 'Roundup'</H1></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><STRONG>Note: This post is continually updated as I come across new techniques.</STRONG></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><P>This collection of techniques to create boxes with rounded corners using <SPAN class="caps">CSS </SPAN>has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><P>To that end I've provided some more information about each method in order to help people choose which best fits their needs.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><P>Some of these techniques use <SPAN class="caps">CSS </SPAN>and one or more background images, some use <SPAN class="caps">CSS,</SPAN> JavaScript and no images, and a couple use only <SPAN class="caps">CSS </SPAN>— no images or JavaScript required (more markup is needed though).</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><H2>Not Sure Which One to Use?</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><P>There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><P>Try out a few methods and see if there's one that fits.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smileycat.com/miaow/archives/000044.html"><H2>The List</H2></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/884B7E58-C316-40B3-B54C-4291D451AD9A/blog/" title="blog or email this clip"><img src="http://content8.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Blog; Copyright; Privacy; EULA

Search Options

Related Clips

More clips from travislaborde

Today's Top Clips