Welcome to RoundedCornr. Generate HTML/CSS code and images for rounded corners.

Instantly make your web site disruptive, innovative, revolutionary, and... Web 2.0!!


Basic RoundedCornr

Corner radius in pixels (e.g. "15"):
Background color (e.g. "FFFFFF"):
Box color (e.g. "FF9933"):
This generates a basic box with rounded corners. It will create four image files and the necessary HTML and CSS code for you to put rounded corners around your content.

Make sure the background color is the same as the background color of your Web page.

RoundedCornr with Gradient

Corner radius in pixels (e.g. "15"):
Background color (e.g. "FFFFFF"):
Box color at top (e.g. "BFF0FF"):
Box color at bottom (e.g. "B0B0B0"):
Gradient height in pixels (e.g. "60"):
This generates a box with rounded corners and a vertical color gradient, just like the box that this text is sitting in. 'Gradient height' determines the height to make a complete transition from the top color to the bottom color. The height of your box should be greater than 'gradient height" + 2 * 'corner radius' to ensure smooth color blending.

RoundedCornr with Border

This generates a box with rounded corners and a border.

Setting the box color and the background color the same creates the effect of a "frame" around the content, as you see around this text.

Corner radius in pixels (e.g. "15"):
Background color (e.g. "FFFFFF"):
Box color (e.g. "BFF0FF"):
Border color (e.g. "B0B0B0"):
Border width in pixels (e.g. "4"):
Margin in pixels (e.g. "15"):

This is so Web 2.0!!

Single RoundedCornr Image

Here we generate a single GIF image of a box with rounded corners, border, gradient, and/or text. You can use this image as background for your buttons, tabs, text box, etc.

All lengths are expressed in pixels, except for font size, which is expressed in points. We recommend specifying a color in 'Corner background' rather than making it transparent. The background color will help us generate an image with a smoother edge (antialiased).

Height:
Width:
Corner background:
Color:
Top Left Corner:
Top Right Corner:
Bottom Left Corner:
Bottom Right Corner:
Corner radius:
Box:
Color:
Color at top:
Color at bottom:
Gradient height:
Border:
Thickness:
Color:
Optional:
Text:
Text color:
Font size (in points):

Pure Gradient Image

Unlike the generators above, this one doesn't create anything with rounded corners. It makes a 1-pixel-wide vertical gradient image that you can set as background to your HTML elements.

Color at top (e.g. "00A000"):
Color at bottom (e.g. "003000"):
Gradient height in pixels:

If you use RoundedCornr for your Website, please kindly make a one-time, $5 contribution to support our development effort.

Send your contribution by clicking the Google Checkout button below.

Thank you!!


Notes and Acknowledgements

While other people claim to eat their own dog food, we at RoundedCornr only claim to eat our own ramen. (We have standards, you know...) This site was decorated with images and code generated from the site itself; Photoshop was used only once, for creating the RoundedCornr logo at the top of the page.

The images and code generated by RoundedCornr are inspired by several sources. Techniques for creating a basic box with rounded corners have been spotted at a number of places. The one we used for the Basic RoundedCornr is based on Chapter 24 of O'Reilly's Web Design in a Nutshell by Jennifer Niederst Robbins. You can find essentially the same technique explained at http://kalsey.com/2003/07/rounded_corners_in_css/. The RoundedCornr with Gradient is a straightforward variation where we added a gradient background image and adjusted the color of the DIV elements.

The RoundedCornr with Border is done using a technique explained in Søren Madsen's article CSS Design: Creating Custom Corners & Borders. You will find some enhancements described in a sequel to the article, and Ryan Thrash independently developed a similiar technique. Madsen's original article created a cool-looking box with rounded corners, solid border, and a fuzzy drop shadow. Currently rounded corners and gradient are sufficient to make a site Web 2.0. As fuzzy drop shadow becomes de rigueur for Web 2.0 sites, we'll be adding an option to generate them as well.

We have also used R. Parker's PHP code for antialiasing.

VCs and Google acquisition people can go ahead and reach us at chuck at roundedcornr. Be sure to put .com at the end. The hoi polloi can send questions and comments to the same address.


Random Web 2.0 Tag Cloud and Link Love

TechCrunch Meebo Web server Ajax beta Web hosting Linux PHP CakePHP Apache entrepreneurship Tomcat Lucene social media user generated content read/write web Flickr Wiki blog Enterprise 2.0 sharing Script.aculo.us stock photograph user interface design CSS stylesheets Ruby on Rails DHTML cascading style sheets usability Mozilla Firefox server-side scripts social network A List Apart Dreamweaver Adobe Photoshop Apple Mac bubble AdSense search engine SEO acquisition venture capital YCombinator Stanford BASES PPC Nutch logo designs managed web servers start-ups RSS feed user contributed data 37signals HTML XML make money do no evil yeah right XHTML crowdsourcing XMLHttpRequest CRV typeface font typography Web design tags Flash Safari mashup weblogs media Wikipedia search engine optimization tag clouds collective intelligence MySQL collaboration

Copyright © 2006, RoundedCornr.com. All rights reserved.