Azmyth Graphics Logo

Cheap Graphic Design Now with Cheap Hosting &Cheap Domain Names from GoMandy.com

 

Rounded Table Corners with out Images!

Rounding the Corners:

Turn your sharp table corners or edges into rounded table corners with some CSS. Yup!, CSS can round off table corners too. Mozilla and Netscape 6.x and higher came up with this code and it only works in those browsers, so it still leaves Internet Explorer with the normal, looking tables. You can use Dreamweaver's CSS editor for all but the small ammount of code that does the actual rounding.

Here is how you create round corners on your Tables in Dreamweaver with out using images:

FIRST!... Create a new style using the "Redefine HTML" Tag option, and select Table from the list in the pull down menu.. Make a style as you normally would to the CSS Style Definition dialog. There you can choose a background color, a border size, and color for the table. When you are happy with your choices, hit OK.

SECOND!... you have to edit your CSS. Most of you will know how to Edit your CSS but,.... in order to get Rounded Corners on your Tables to work, you need to add a line of Code to your CSS. Just find the CSS file and double click it. Now at the bottom... paste this:

 

-moz-border-radius: 12px;


Don't forget to add that starting dash, or the code won't do crap! Now... in your Design view of Dreamweaver, everything will look like it normally does so don't freak out. You won't see anything until you look at the page in one of those aformentioned browsers. When you load up your page in say.. netscape or Mozilla, or FireFox you will see your tables with Rounded Corners. The edges can sometimes look pixelated, but try messing with the colors... some work better together than other color combinations do.. Hopefully someday the new Internet Explorer will be able to support this feature! would be nice to See those Rounded Table Corners in IE

For an advanced look, try copying and pasting this code, ( it uses a negative value to get a really cool rounded corner on your table. and no Images! I have attached a link to download firefox below, try it out with this tutorial.

-moz-border-radius-topright: -12px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;


Figure 4. Making table corners rounded with CSS

Back to Tutorials

 

 
 
sitemap