Table of Contents

CSS Borders

CSS Borders allow you to apply a border on any HTML element. You can specify the border style, width, and color.

Let me show you a simple example of using the border property:

p{
    border:1px solid black;
}

If that style was applied to the following element:

<p>I have a border</p>

That would result in the following outcome:

CSS border example

Let's analyze the border property a bit more. As you can see we have the border property with 3 values, 1px solid black. Each corresponds to the following properties which can also be applied separately:

CSS Border Properties

  • border-width - specify the width of the border in pixels
  • border-style - specify the style of the border (solid, dashed, dotted, etc.)
  • border-color - specify the color of the border

So, we could create the same output by specifying each of these separately:

p{
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

Additionally, you can specify each of the sides of the border with, border-top, border-right, border-bottom, and border-left. Take a look at the following example of each border with different widths, styles, and colors.

p{
    border-top: 5px solid green;
    border-right: 10px dotted red;
    border-bottom: 15px dashed blue;
    border-left: 20px solid black;
}

This code example would produce the following result:

CSS Border Top, Right, Left, and Bottom

Next, we'll move on to talking about CSS margins.

Previous Section Next Section