Skip to content

Web2Coder

My Desktop Blog News Articles Tutorials Links Forum
You are here: Home arrow Blog arrow List of Rounded Corners Websites
List of Rounded Corners Websites Print E-mail
Written by Administrator   
Tuesday, 20 February 2007
Tag it:
Stumble
Delicious
Digg
feedmelinks
Reddit
YahooMyWeb
Spurl
Technorati
Here are the list of some available useful solutions for Rounded Corners.  Please suggest any other websites that you know in comments.

Deep Nesting: supports borders

Top and bottom group of divs or spans: supports borders

Sliding doors: better for smaller boxes

This technique was inspired by Douglas Bowmann's [ALA] article [Sliding Doors of CSS].

Change the border color with CSS, no image change.

This technique was inspired by Roger Johansson's [Teaser Boxes] and Maurice Svay [Nested <div> technique].

IMG tags inside a div:

  • [kalsey.com] uses very simple HTML and CSS code. Doesn't require lots of nested Divs. Limited to solid area fill and doesn't do borders.

Only IMG tags: single pixel borders only

  • [albin.net] supports current browsers, but uses hacks extensively

-moz-border-radius: Mozilla only

  • [clagnut.com] shows how to use Mozilla's extensions for rounded corners. (Note that the Mozilla extensions do not conform to the CSS3 border module)

Generated content: beautiful

  • [virtuelvis.com] - Very simple HTML, though requires generated content support. Works in Moz, Opera, Safari 1.1 and degrades gracefully in IE.

Scripted - very clean HTML

  • [Nifty Corners] Rounded corners without images :: Alessandro Fulciniti, first version (16 Mar. 2005)
  • [More Nifty Corners] :: Alessandro Fulciniti, second version (06 Apr. 2005). Works in IE 5.5 and later, Opera 7.5 and later, Gecko af Firefox 1.0 level, and Safari 1.1.
  • [Nifty Corners Cube] :: Alessandro Fulciniti, final version (27 Apr. 2006)
  • [Transparent custom corners and borders]
  • [Gradient Corners] Gradient backgrounds with rounded corners. Works in IE 5. and later, Firefox 1.5, and Safari 2.0. (Untested in other browsers.)
  • [RuzeeBorders] Anti-aliased corners, drop shadows, different border widths. Works on all modern browsers, even Opera and Konqueror.

Free Online Web Tools

Commercial Tools

  • [ WellRounded DreamWeaver Extension] Supports custom foreground and background colors, borders, drop shadows and inner shadows. Creates graphics and insert CSS and XHTML 1.1 valid markup into the current DreamWeaver document. The containers support relative dynamic positioning, size-to-content. Tutorials provided for using the WellRounded containers as columns, nesting, etc.

Clean Markup - No Javascript

  • [Spanky Corners] No extra DIVs or Javascript required. Doesn't support nesting, or IE5. Requires a minimum HTML structure (DIV, Header, Content). CSS and Images autogenerated by a tool.
Trackback(0)
Comments (4)Add Comment
Nice design
written by Bino Bose, November 06, 2007
Hi
This site is too good. implementation is great
Codepal
written by Bino Bose, November 06, 2007
cs list
written by css map, August 07, 2008
CSS "Cascading Style Sheets" Lessons
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm
Great List
written by dora, September 28, 2008
Thanks for the list. Here is another generator: http://www.roundz.net/

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley
Smiley

security code
Write the displayed characters


Copyright 2007. All Rights Reserved.
busy
Last Updated ( Tuesday, 20 February 2007 )
 
Next >

Login


[+]
  • Narrow screen resolution
  • Wide screen resolution
  • Auto width resolution
  • Increase font size
  • Decrease font size
  • Default font size
  • fresh color
  • hot color
  • natural color
  • dark color