We use cookies. More

CSS Basics Part 9: CSS Borders

CSS
f t g+ in

In this tutorial, we will talk about CSS border properties such as border width, style and color by giving some examples.

Advertisement

In the previous part of CSS Basics series, I talked about styling backgrounds with CSS, and in this part I will continue with styling borders.

Borders are very useful styling elements that you can place around body elements like divisions, paragraphs, images or links and if used properly with the background styling, you can achieve very nice looking designs with borders. CSS has a number of border properties for the style, color, and width of a border. And below I will briefly talk about each of them.

Border

border property is just like the font or background property and can be used alone to style the border. Here is how it is used:

p { border: 2px solid black }

The above code will add a solid black border to the paragraphs that has a width of 2 pixels. You can change the width, style and color of the border to whatever value you want. I will explain which values you can use in the following sections.

Border Style

border-style property is used to set the type of the border. You can create dashed, dotted, solid and groovy borders with this property.

p { border-style: dashed }

The above code will create a dashed border just like the one you see below:

This box has a dashed border.

You can have the following values with border-style property: none, dotted, dashed, solid, double value, groove, ridge, inset and outset. Try each of them and see what kind of a border they create.

Border Color

border-color property is used to set the color of a border. Using specific border properties makes sense when you have a lot of borders and want to give different styling to some of them. See the example below:

p { border: 1px solid black }
p .first-paragraph { border-color: blue }

The above code will set the border color to black for all the paragraphs except the first one. You can use the name of the color, its hexadecimal number and RGB code with border-color. It can also take the "transparent" value, if you want to have invisible borders. Note that you need to use border-color property together with the border-style property since it will not work alone.

Border Width

border-width property sets the width of the border. It must be used together with border-style in order to work.

p { border-width: 2px }

You can either set the width of the border using a pixel value or the following values: thin, medium, thick.

Border Sides

CSS gives the flexibility of styling each side of a border separately. For example, you can have a border that has a blue left and right sides and black top and bottom sides. I will give a few examples below:

p.first {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
p.second {
border-top-color:black;
border-right-color:blue;
border-bottom-color:black;
border-left-color:blue;
}

This is all I want to talk about CSS borders, I will continue with CSS links on the next part.

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in