Available Tutorials:

Basic HTML Tutorial

This covers the basics of HTML page foundations, links, and image inclusion. Clear descriptions of tags will help you understand how to customize the look and feel of your Web pages. Includes working HTML code to create a functioning Web page. First page of html tutorial showing page foundation.

Only $5.00!

Cross-browser Favicons

Learn how to create and install favicons. These are the small graphics displayed next to saved favorites and in the address bar on most browsers. Make your pages more professional looking with this simple to follow tutorial!


Example of a favicon as displayed next to a browser's address bar.

Just $2.00

New!

Rounded Corners for Borders

For standards compliant browsers, you do not need to mess around with JavaScript and a bunch of images that slow down your page download times (remember that, like it or not, there are still a lot of folks still stuck with dial-up Internet connections) and create a lot more work for you any time you change the appearance of your pages. Instead, you can use a few simple lines in your HTML code to give sections the rounded corner look. Even though IE ignores "border-radius", it degrades acceptably into the familiar squared corners.

We will address three browser types--Safari, Mozilla-based and Webkit-based--by adding some quick code. I'll show you how to do this, first, using inline styles. You can also do this within CSS, either locally or using an external stylesheet. However, you can create some of the most interesting combinations by doing this locally. For example, this page uses rounded corners on some of its table cells. I define these table cells something like this:

<td valign="top" colspan="2" bgcolor="#111111" style="border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px">

The "moz" and "webkit" talks to browsers like Firefox and Chrome, each recognizing the "border-radius" HTML function. Safari recognizes the border-radius function without being specifically addressed to the browser. Currently, IE does not do anything with the "border-radius" function, though I have heard that the next version of Internet Explorer, IE9, may.

Now, I could also have done this using a DIV tag and my style sheet versus the local solution. To do this, you would refer to the DIV you want to use rounded corners in, in this example the DIV id called "mainContent". If you are doing this to a table cell's corners, you could do this in your style sheet:

mainContent td {
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
}

Experiment a bit with the corner radius sizes by changing the 15px to something else. After that, let your imagination have some fun with this. Last, I would not worry too much about IE not displaying your new rounded corners. However, if it is that important to you that they do, you probably won't mind spending the extra time doing the IE corner image work arounds to this standards-based solution.