CSS Borders

Designing web pages and placing elements with the proper look sometimes requires using borders with the appropriate color and size. Therefore, CSS allows you to specify borders to make HTML elements implementation look proper. In this chapter, you will learn about border properties supported by CSS.

Border Property in CSS

CSS's border properties allow its users to specify the style, color, and border width of any HTML element for which it is specified. There are three properties based on which border properties can be changed:

CSS Border PropertyDescription
border-colorborder-color is used to specify the color of the border of your element.
border-styleborder-style is used to specify whether your element's border should be solid, line, dashed, double-line, or any other possible value.
border-widthThe border-width is used for assigning the width value for your border.

Let us now see how they can be implemented within a program.

Border Color

The border color can be implemented within a program.

Example:
<style>
.classname {
    border:2px solid;
    border-bottom-color: red;
    border-top-color: #009900; /* Green */
    border-left-color: #0000CC;  /* Blue */
    border-right-color: orange
}
</style>

Border Style

The style property (implemented using border-style) dictates what type of style your border will display. Following values can be assigned to this property:

Border ValueDescription
dashedIt creates a dashed border.
dottedIt creates a dotted border.
solidIt creates a solid border.
noneIt removes existing borders from the element.
hiddenIt hides existing borders from the element.
doubleIt creates a double line border.
ridge It creates a border with 3-D rigged. Its outcome depends largely on the border-color value.
insetIt creates a 3-D inset border. Its outcome depends largely on the border-color value.
grooveIt creates a border with 3-D grooved. The outcome depends largely on the border-color value.
outsetIt creates a 3-D outset border.

This is a code snippet of how they can be implemented:

Example:
<style>
h2.solid { border-style: solid; }

h2.dotted { border-style: dotted; }

h2.dashed { border-style: dashed; }

h2.none { border-style: none; }

h2.hidden { border-style: hidden; }

h2.double { border-style: double; }

h2.ridge { border-style: ridge; }

h2.groove { border-style: groove; }

h2.inset { border-style: inset; }

h2.outset { border-style: outset; }

h2.mix { border-style: dotted dashed solid double; }
</style>

Border Width

The width of the border (applied using the border-width property) is determined using a particular size (typically measured in px, em, pt, cm, etc.) or by using any of the 3 pre-defined words (thin, medium, or thick) as values. This property can be one of the four values, such as ( top border, right border, bottom border, and left border).

Here is a CSS code snippet which shows how you can implement them:

Example:
<style>
.classname {
    border-style: solid;
    border-width: 6px;
}

.classname1 {
    border-style: solid;
    border-width: medium;
}
</style>

Border Shorthand Property

For shortening your code, you can probably identify all the individual border properties under a single property. You have to make use of the border property for implementing the shorthand notation for implementing border properties individually on all borders:

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

Here is a program showing the implementation for shorthand:

Example:
<style>
.classname {
    border: 4px solid aqua;
}
</style>

Rounded Borders

You can use the border-radius property to round the boundaries of any HTML element. Here is a CSS code snippet of how to implement:

Example:
<style>
.classname {
    border: 4px solid aqua;
    border-radius: 6px;
}
</style>

Scroll Back to Top