CSS3 Border Properties

CSS3 Basics - Part 13

Forward: In this part of the series we look at border properties in CSS3.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 13 of my series, CSS3 Basics. In this part of the series we look at border properties in CSS3. I assume you have read the previous parts of the series before reaching here, because this tutorial is a continuation. A border can have a width and a style. It can then optionally have a color or optionally have an image.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Border Style
The border style gives the “design” of the border. The diagram (copied from the css3 w3c specification) shows the different border styles and their names.

A style name is what you use as the value to code the style.

Styles and Meaning
none
This means there should be no border. Any color and width coded are ignored.
hidden
This is more or less the same as none.
dotted
This style is a series of round dots.
dashed
This style is a series of square-ended dashes.
solid
This style is a single line segment.
double
This style gives two parallel solid lines with some space between them.
groove
This gives a depression (line segment).
ridge
This gives a swelling out of the screen toward you (line segment).
inset
This style makes the content of the element looks as if it is sunken into the screen.
outset
This style makes the content of the element looks as if it is coming out of the screen.

Note: the solid style is the most common.

Border Width
Whether or not an element already has a border width, you can set all the four (top, right bottom and left) border widths to the same value with the following property syntax:

 border-width:value;

The value can be a number in px or percentage. If it is percentage, then it is relative to the width of the containing element that has the element in question; however, the percentage unit may not work with your browser.

Hey, the value can just be the single word, thin or medium or thick. “thin” means a thin border; “medium” means a medium size border and “thick” means a thick border.

Necessary properties for a Border
A border can optionally have a color and other properties. However, any border should have at least two properties, which are the width and style, everything being equal. Read and try the following code, where paragraphs are used as the elements (boxes) in question:

<!DOCTYPE HTML>
<html>
<head>
 <title>Illustration</title>
</head>
<body>
 A paragraph with the dotted style border.
 A paragraph with the solid style border.
 A paragraph with the dotted style border.
</body>
</html>

Note: without color (for the border), the border appears in black and white.

Border Color
A border can have a color. Whether or not an element already has a color, you can set all the four (top, right bottom and left) colors to the same value with the following property syntax:

 border-color:colorValue;

The colorValue is the name of the color or the rgb code. Read and try the following program:

<!DOCTYPE HTML>
<html>
<head>
 <title>Illustration</title>
</head>
<body>
 A paragraph with the dotted style border.
 A paragraph with the solid style border.
 A paragraph with the dotted style border.
</body>
</html>

Note: borders are drawn in front of the element's background, but behind the element's content (in case the content overlaps the border).

That is it, for this part of the series. We continue in the next part.

Chrys

Broad Network

CSS3 Border Properties

CSS3 Basics - Part 13

Introduction

Related Links

Comments