Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
CSS Rounded Corners 'Roundup'
travislaborde
follow
10
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
Related Clips
Digital Art Animations using "Processing"
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
The rival to the Bible
Female Fighters: We Won't Stand for Male Dominance
Scientists create solar cells with a twist.
Different nesting options :)
The Surge has Worked
Clive Thompson: Why Veteran Visionaries Will Save the World
Obama Hatred at McCain-Palin Rallies: "Terrorist!" "Kill Him!"
Layers of Red Cliffs on Mars (Photo)
Our "Digital Shadow" -a Mind-Bending Prediction
Bush snubs Iran breakthrough opportunity
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;"> </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
OK