Primary Menu

CSS 101: CSS Borders

CSS borders are used for determining the kind of border to be used on a page that you are working on. It can be used for setting the color and even of the style to be used on the page.

The Border Style Properties

Before the working on the border properties you need to set the border style first. Here are some of the more important border style values that you should know about:

none- This means that there is going to be no border.

dashed- This means that a dashed border is going to be utilized.

solid- This is to define that a solid border is going to be used.

groove- This means that a 3D groove effect is going to be used on the border. The appearance would depend on the color to be used.

ridged- This means a 3D ridged effect is going to be used on the border. Like the groove effect, it would depend on the color effect.

inset- This is for a 3D inset effect.

outset- This is for a 3D outset effect on the border.

CSS Border Width

The width of the border is determined by the CSS border-width property. It can be set by naming the number of pixels to be taken up by the border or by just picking one of the three values that have been predefined. These pre-defined values are thick, medium and thin.

Here is an example of a code for borders:

{
border-style: groove;
border-width:6px;
}

CSS Border Color

When it comes to determining the color to be used for the border, the border- color property is the one to be set. It can be set by using the simple name of the color such as “blue” for example, through an RGB value like "rgb(255,0,0)", or though a hex value like this, "#ff0000". Here is an example of a code for border color property using a name of a color:

{
border-style:solid;
border-color:green;
}

CSS Border Individual Sides

One property of CSS when it comes to borders is that it can be used for defining different borders on different sides. Here is an example on how that can be done:

Simplifying Border Properties

It is easy to see why border properties can be a little confusing initially. There are so many properties that can be set and have to be changed. As you become more familiar with it however, you will find out that there are ways that you can simplify it. This simplified version is known as border- shorthand property. The border- shorthand property is a shortcut for three crucial properties of the border. These are the width, the style and the color. Here is an example code for that:

border:5px solid red;

These are just some of the basic things that you should know about the border properties in CSS. Obviously from what you have seen here, there are so many things that you can still learn about this topic.