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

Check out this list of reliable hosts that can handle HTML and CSS codes better.


Bookmark this site:
del.icio.us
Digg!
Yahoo MyWeb

Basic RoundedCornr

Corner radius in pixels:
Background color:
Box color:
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:
Background color:
Box color at top:
Box color at bottom:
Gradient height in pixels:
Gradient angle (degrees):

This generates code for a box with rounded corners and a color gradient, just like the box surrounding this section. 'Gradient height' determines the distance to make a complete transition from the top color to the bottom color. You can specify any gradient angle between 0 (vertical) and 90 (horizontal) degrees.


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:
Background color:
Box color:
Border color:
Border width in pixels:
Margin in pixels:

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 (anti-aliased) edge.

Sample Images:

Tabs:
Input Box:
Buttons:
Gradients:
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:
Color:
Font size (in points):



If you use RoundedCornr for your public Web site, please kindly pay a one-time, $5 fee to support our development effort.

Send your payment by clicking the Google Checkout button to the right. Thank you!!


About

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.

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. You can find essentially the same technique explained at http://kalsey.com/2003/07/rounded_corners_in_css/. For RoundedCornr with Gradient we've only changed background images.

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 has independently developed a similiar technique.

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

You can reach me at chuck at roundedcornr. Be sure to put .com at the end.

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