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
