Rounded Corners without Images: A Nifty Corners Inspiration

When I first saw Alessandro Fulciniti's Nifty corners page, I thought it's a little bit too complicated for me. Good luck I found it later again. It's a perfect idea.

What is it all about? It's a method of creating rounded corners of an element without using images, just with a piece of JavaScript and few drops of CSS. I like rounded corners, but the necessity to create for every diameter and every combination of foreground and background color 4 images for me as the designer and to download them for the user makes me use the square ones in most cases. The Nifty corners method offers different approach: instead of inserting the images of rounded corners it inserts a few pixels high container block of the same background color as the background of the parent element. This block contains strips 1–2 pixel height, that have the same background color as the element, that should have rounded corners. Margins of these strips changes from 0 up to radius of desired corners, which makes the outer element appear rounded. See the picture for explanation:

The point is adding the strips into the page via JavaScript. The Allesandro Fulciniti's script calls a function for each element, that should be rounded with foreground and background colors and ID of the element.

Well, this is a serious disadvantage of this method, at least for me, as I am a lazy web designer and the necessity to call the JavaScript for each element would in real life cause me not to use this function at all. The perfect way for me would be to add a class to each element, that should be rounded and leave the rest to JavaScript. And it would be nice to have possibility to set the radius of the rounded corners as well. Also could be useful if the script can determine the colors, so that I don't have to set them up manually.

So I got to work and after some time spent on fighting sin() and cos() functions I had it.

Instructions for use

1. Link the JavaScript rounded-corners.js to the page (by adding the <script src="rounded-corners.js"></script> to the header of your page).


2. Add the rounded class to all elements, that should have the rounded corners. You can set up some parameters of the corners by adding another classes as well, see bellow.


3. On the very bottom of the page call the JavaScript function make_corners(). (It's better than calling it by the onload event of the page, because it waits till all the pictures are loaded.)

See a simple example of rounded corners.

Setting up the parameters of corners

For each element with the rounded class you can set additional parameters through another classes. The layout can be set up through CSS as well, using the classes rounded (the element with rounded corners), rc-container-top and rc-container-bottom (containers for the rounding strips), rc-inner a rc-level-NN (rounding strips; NN is i number in range 0 up to corner radius).

Names of the parameters classes should have name in the form rc-[property_name]-[property_value]. Use 1 / 0 values for booleans (you can omit the 1 value). All the parameters have a corresponding JavaScript variable with the name $rc_[property_name], in the rounded_corners() function. The next table shows an overview of all the parameters.

CSS Class name	JS variable	Description
rc-radius-[integer]	$rc_radius	Sets the radius of corners.
rc-top-[0|1]	$rc_top	Switches rounding of upper corners.
rc-bottom-[0|1]	$rc_bottom	Switches rounding of lower corners.
rc-right-[0|1]	$rc_right	Switches rounding of right corners.
rc-left-[0|1]	$rc_left	Switches rounding of left corners.
rc-selfcolor-[RRGGBB]	$rc_self_color	Sets color of the rounded element.
rc-parentcolor-[RRGGBB]	$rc_parent_color	Sets the background color (color of the parent element).
rc-inheritstylecolors-[0|1]		When enabled, the script sets no color, which means that CSS defined colors are used.
rc-antialiased-[0|1]	$rc_antialiased	Adds border to the strips which makes the corners look a bit anti-aliased. (But it's no real anti-aliasing.) Works with rc-method-margin only. Warning: doesn't work with MSIE when colors are set like white or #FFF and not #FFFFFF or rgb(255,255,255). (Execution crashes in such case and no rounding is produced.)
rc-antialiasedcf-[0-1]	$rc_antialiased_cf	Anti-aliasing ratio. The closer to 1, the closer is the color of anti-aliasing border to the background color.
rc-compact-[0|1]	$rc_compact	Sets negative margins to the containers, so that the rounded element doesn't get bigger. Sometimes buggy in MSIE.
rc-automargin-[0|1]	$rc_auto_margin	Sets negative margin to compensate padding of the rounded element. Does not work in MSIE.
rc-method-[margin|border]	$rc_method	Sets the method of drawing rounded corners.
rc-border	$rc_border	Creates rounded borders. For instructions about how to use it see example of rounded borders.

The rc-method property is of importance, as it determines the method of drawing rounded corners:

margin

Draws the container with the same background color, as the parent element. The strips have the color of rounded element and variable margin margin. You can use the “anti-aliasing” in this case.

border

Background of the container and strips remains transparent, but the strips have variable with borders of the same color, as the parent element. This method is useful, when you have an image as background of the rounded element.

See an example of using parameters of rounded corners.

How does it work?

First the script finds all the elements that should be rounded (using the find_class() function) Then it checks the rounded corners parameters. When a property is not found, it uses the default value (see the first line of rounded_corners()function). Then it inserts the rounding container and strips. Their color is determined by the function get_current_style(), which unfortunately doesn't work in KHTML browsers (like Safari and Konqueror) and older versions of Opera (prior to 7.5) as these browser don't support the getComputedStyle() method of defaultView object. However, for these browser you can use the “manual setting” of colors or just leave the corners square till they start to support it. (The time should come, as this is a part of DOM standard.)

All comments, improvements, suggestions etc. are welcome. You can use all the code, ideas etc. any way you want. Enjoy.

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text

color:
p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

The class Selector
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

This paragraph will be right-aligned.

This paragraph will be center-aligned.

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

This is a paragraph.

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

This heading will be center-aligned

This paragraph will also be center-aligned.

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
The id Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of "green":

#green {color: green}

The style rule below will match the p element that has an id with a value of "para1":

p#para1
{
text-align: center;
color: red
}

What is CSS?

What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like a nd so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.
Multiple Styles Will Cascade Into One Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (inside the tag)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).

Cascading Style Sheets

A standard for specifying the appearance of text and other elements. CSS was developed for use with HTML in Web pages but is also used in other situations, notably in applications built using XPFE. CSS is typically used to provide a single "library" of styles that are used over and over throughout a large number of related documents, as in a web site. A CSS file might specify that all numbered lists are to appear in italics. By changing that single specification the look of a large number of documents can be easily changed.

Effective Use of Style Sheets

Cascading style sheets (CSS) are an elegantly designed extension to the Web and one of the greatest hopes for recapturing the Web's ideal of separation of presentation and content. The Web is the ultimate cross-platform system, and your content will be presented on such a huge variety of devices that pages should specify the meaning of the information and leave presentation details to a merger (or "cascade") of site-specified style sheets and the user's preferences. If the introduction of WebTV broke your pages, you will appreciate the ability to introduce new page designs by creating a single style sheet file rather than by modifying thousands of content pages.


Centralized Style

Use a single style sheet for all of the pages on your site (or possibly a few coordinated ones if you have pages with very different needs: for example technical documentation versus marketing pages). One of the main benefits of style sheets is to ensure visual continuity as the user navigates your site. Legacy publications have long known the value of basing print products on a single typeface: no matter where you turn in a magazine or a newspaper, the text and basic layout will look the same. Websites will gain the same brand cohesiveness if all the pages on a site link to the same style sheet.

Always use linked style sheets rather than embedded styles. Only by referencing an external file will you get the maintenance benefits of being able to update the look of your entire site with a single change. Also, by pulling style definitions out of your pages, you make them smaller and faster to download. If you use a single style sheet for your entire site, that file will be a single download once and for all.

For each site, all the style sheets should be designed by a single, central design group. Two reasons: First, centralized design is the only way to ensure a consistent style and reap one of the main benefits of style sheets. Second, the majority of Web content creators are not capable of designing and writing good style sheets. Experience with word processors that support style sheets indicates that most authors mangle their style sheets terribly. Understanding the effect of style is relatively easy in traditional desktop publishing because it is a WYSIWYG environment with a single, canonical output form. The Web is not WYSIWYG because of the variability in supported platforms. Furthermore, Web stylesheets are cascading, meaning that the site's style sheet is merged with the user's style sheet to create the ultimate presentation. These differences make it important that Web style sheets are designed by a specialist who understands the many ways in which the result may look different than what is on his or her own screen.

Fund an active evangelism program to teach your content creators how to use the centrally defined style sheet. Do not assume that people understand the concept of style and how to apply it, simply because they know a word processor with style sheets. Research shows that most users make horrible mistakes in using word processing style sheets: partly because the main word processors have particularly bad style sheet usability and partly because style is hard. Your style sheet should come with a small manual that explains the different styles and when and how to use them. Include plenty of examples, including both raw HTML code (cutting-and-pasting examples is the main way people use documentation) and screenshots of the appearance of correctly coded pages in several mainstream browsers on several different platforms. The screenshots should be made into clickable imagemaps, allowing users to click on an effect they want to achieve and get to the documentation for the appropriate styles. In particular, if multiple styles have similar appearance, many errors can be avoided by explaining the differences and when to use which style.

Despite my preference for linked style sheets and central design, individual page authors should be allowed to create additional embedded styles for their own pages when necessary. Authors should be encouraged to only do so when absolutely necessary, but there will always be cases where a certain style is needed that is not supplied in the central style sheet. If many pages need the same effect, it should be added to the site's global style sheet, but it would be bad to inflate the one linked style sheet with styles that are only needed once. Single-page styles should be embedded rather than linked: the page should continue to link in the global style sheet and then override it with local, embedded styles as necessary. Doing so has the benefit of allowing future changes to the central style sheet to propagate to the modified page to the greatest extent possible.

Implementation Advice

• Pages must continue to work when style sheets are disabled: for example, do not use tricks where the same words are repeated multiple times with small offsets to create shadow effects (without the intended style, the text turns into gibberish). Retaining a decent presentation without the style sheet is mandatory to support users with older browsers, blind users, and users who need to disable the style feature in their browser (either because of bugs or because your style conflicts too much with their preferences). Luckily, it is very easy to check conformance with this rule: simply disable style sheets in your browser and reload the page.
• Do not use more than two fonts (plus possibly a third for special text like computer code). Remember the lesson from the early days of desktop publishing: using a lot of fonts simply because you can will result in a ransom-note look. Typically, you can use one typeface for body text and another, bolder, face for headings. Note that it is fine (indeed, recommended) to use a long list of alternate fonts in the style sheet specification for a given class of text: the user's browser will pick the first available font in the list and use it throughout your pages, meaning that the user will see a single font, making the site feel typographically unified. It is important that lists of font names have the fonts listed in the same order, since the browser picks the first one it has available.
• Do not use absolute font sizes; instead specify all text relative to the base font size defined by the user's preference setting. For example, large text could be defined as "200%", meaning that it would be set as 24 point if the user preferred 12 point for body text and 20 point if the user preferred 10 point for body text. Whether people prefer large or small fonts depends on a variety of questions, including the size and resolution of their monitors and the user's eyesight. It is somewhat annoying to visit a website where the text is too small for comfortable reading under my circumstances, but it is very annoying to click on the "make text bigger" button and have nothing happen because the font sizes were defined as an absolute number of points.
• Do not use the !important attribute to override the user's settings. It is hard to imagine cases where you are justified in ignoring the user's preferences if the user felt strongly enough to use his or her own !important rating, so !important should be reserved for user style sheets.
• If you have multiple style sheets, then make sure to use the same CLASS names for the same concept in all of the style sheets. Content creators using two or more style sheets will be confused if different CLASSes are used for the same thing or if one style sheet has a CLASS that is missing in the other style sheet even though the concept applied in both cases. If, for example, you have a CLASS for the name of the author of a document, then all of your style sheets should have this CLASS, even though it may be defined to render differently, as appropriate for the different kinds of documents.