CSS Border Styles

Explanation of the different types or styles of borders that we can create in CSS, through the border attribute.

CSS allows you to create various types of borders on page elements. The most common border is that of a smooth line, but there are also other types of borders that we can implement such as a dotted line, rounded borders, etc. In this .com article we will see the different possibilities of creating borders in CSS.

The truth is that at .com we have already talked several times about borders with CSS, especially to explain ways to make rounded borders, which tend to be very attractive on web pages. Anyway, let’s see how to specify a border with CSS.

DIV {
border: 1px solid #d0d0d0;
}

This will achieve that all the DIV tags on the page have a 1-pixel border, solid (of a solid line) and with a grayish color (#d0d0d0).

What we are going to see in this article is the different border styles, apart from the solid that we already know. To illustrate the exercise, I have created a page with the different examples of borders. But since we are talking about borders, regarding its declaration in CSS, it is possible to say that we could use a different notation, in which we separately specify the three attributes of the border, as follows:

.solidedge{
border-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}

We can also specify the borders separately for each of the element’s sides, like this:

.sideborder{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;
}

We have seen all these indications for the construction of borders in previous CSS articles on web development .com, such as the css manual or the css workshop.

border styles

With the border-style attribute we can define various border styles, among a relatively wide range of possibilities. However, we have to admit that many of the styles make for rather ugly borders, which we should use with great care.

The possible border styles are:

• solid
• dotted
• double
• dashed
• groove
• ridge
• set
• outset

We can on a separate page.

Now we are going to comment on these different styles and give examples of each one.

solid edge:

This border is a solid line.

.solidedge{
border:-color: #aaaaaa;
border-width: 1px;
border-style: solid;
}

Dotted border:

This border is made up of a dotted line.

.dottedborder{
border: 1px dotted #ff8833;
}

Double edge (Double):

The double border is composed of a solid double line. You have to know that for this border to look like a double line, we have to specify a width of at least 3 pixels. This is what a border would look like with two lines of one pixel plus a space separating the border of another pixel. As we specify a greater width of the double border, the lines increase in thickness, as well as the space between them.

.doubleborder{
border: 9px double #990000;
}

Dashed border (dashed line):

The dashed border is very similar to the dotted border, but instead of dots, what we have is a dashed line.

.borderedashed{
border: 1px dashed #660000;
}

Groove edge:

It is a special border, with a kind of relief difficult to describe, created with the combination of light and dark border colors.

.edgegroove{
border: 5px groove #66cc66;
}

Ridge edge (ridge):

This border is also a bit weird. Similar to groove, but with the dark and light colors reversed.

div.borderridge{
border: 10px ridge #6666cc;
}

Inset edge (embossed inward):

Creates an edge with an imitation bevel, as if sunken. The effect of this border is best seen if the element it is bordering has a background color close to the border color.

div.borderinset{
border: 10px inset #3333ff;
background-color: #0000ff;
}

Outset edge (embossed out):

This latest edge style mimics a bevel, much like a button that is raised. It is the same as the inset border style, but with the light and dark colors reversed. We will also see this effect better if the element has a background color.

div.borderoutset{
border: 10px offset #cccccc;
background-color: #cccccc;
}

Again, I put the .

Rounded edge with CSS

The rounded border, or with curved corners, can be specified starting from CSS3. We have already explained this in the article:

We can also do it through different techniques, which do not require CSS3, which is not yet supported by all browsers. You can consult other .com articles that offer these techniques: