CSS Border and Text Attributes

Site hosted by Angelfire.com: Build your free website today!

Each of these paragraphs has been formatted with a different style of border. There are six different working styles and two that will be supported in later versions of browsers. This is the SOLID STYLE. Each paragraph will be the same border color and the same width (10 pixels) so it's easier to see the highlighting and shading of different border styles. You can also add a background color to font and that is shown here also. I'll play with different background colors for my font.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different style of border. There are six different working styles and two that will be supported in later versions of browsers. This is the DOUBLE STYLE. Each paragraph will be the same border color and the same width (10 pixels) so it's easier to see the highlighting and shading of different border styles. You can also add a background color to font and that is shown here also. I'll play with different background colors for my font.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different style of border. There are six different working styles and two that will be supported in later versions of browsers. This is the GROOVE STYLE. Each paragraph will be the same border color and the same width (10 pixels) so it's easier to see the highlighting and shading of different border styles. You can also add a background color to font and that is shown here also. I'll play with different background colors for my font.

Let's see HTML try this!!!

Groove and Ridge are "reverses" of each other. (Look at the areas which are highlighted in each.) Ridge appears to be pushing upward at you, while groove appears to be pushed inward.

Each of these paragraphs has been formatted with a different style of border. There are six different working styles and two that will be supported in later versions of browsers. This is the RIDGE STYLE. Each paragraph will be the same border color and the same width (10 pixels) so it's easier to see the highlighting and shading of different border styles. You can also add a background color to font and that is shown here also. I'll play with different background colors for my font.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different style of border. There are six different working styles and two that will be supported in later versions of browsers. This is the INSET STYLE. Each paragraph will be the same border color and the same width (10 pixels) so it's easier to see the highlighting and shading of different border styles. You can also add a background color to font and that is shown here also. I'll play with different background colors for my font.

Let's see HTML try this!!!

Inset and Outset are "reverses" of each other. (Look at the areas which are highlighted in each.) Outset appears to be pushing upward at you, while inset appears to be pushed inward.

Each of these paragraphs has been formatted with a different style of border. There are six different working styles and two that will be supported in later versions of browsers. This is the OUTSET STYLE. Each paragraph will be the same border color and the same width (10 pixels) so it's easier to see the highlighting and shading of different border styles. You can also add a background color to font and that is shown here also. I'll play with different background colors for my font.

Let's see HTML try this!!!

The styles that are not yet supported are DOTTED and DASHED.

Let's see HTML try this!!!

OK. Now let's play with different border colors on the ridge and groove borders to see how different colors are shaded.

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!

Each of these paragraphs has been formatted with a different color of border. As you can see, you get a lot of different appearances.

Let's see HTML try this!!!