The CSS Border Properties

border-style

The CSS border properties allow you to specify the style and color of an element's border.

Borders are used to define content such as images and text or certain areas of your website.

There are some older styles of borders like "groove" and "ridge" that are not really used anymore, so we are just going to look at the main types of borders that are used in a modern website.

 

Border Style

The border-style property specifies what kind of border to display.

We will use a "div" tag (element) to display our example borders, we will also use a "class" selector called "my_border" to style our border.
Don't forget when you use a class selector it means you can use the same class multiple times on your web page without having to write the style again.

<div class="my_border"> This element has a border </div>

So what we are saying here is we have a DIV container with text inside it.

In our stylesheet we now have to write the rule for the class "my-class".

Example:

.my_border {
 border-style: dotted;
}

And the result would be:

This element has a border dotted.

So if we wanted a solid border around our content we would simply change the "value" of our declaration to "solid" like so:

.my_border {
 border-style: solid ;
}

And the result would be:

This element has a solid border.

And the same again for the "dashed" border style:

This element has a dashed border .

To be quite honest, the only border that is used on a regular basis these day is the solid border value. With the introduction of CSS3 (which we will cover in later tutorials) borders have been taken to a whole new level.


The Border - Shorthand Property

As you can imagine from the examples above, there are many properties to consider when dealing with borders. such as width, style, colour etc.

To shorten the code, it is also possible to specify all the individual border properties in one property. This is called a shorthand property.

The "border" property is a shorthand for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

The declaration used is just simply "border:".

Example:

.my_border {
 border: 5px solid #ff6600 ;
}

And the result would be:

A 5 pixel solid border with a hexadecimal color of #ff6600 (orange)

NOTE:  The three values here are width (5px), style (solid), and color (#ff6600). Always declare them in that order.

 

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter