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 Property Description
border-color border-color is used to specify the color of the border of your element.
border-style border-style is used to specify whether your element's border should be solid, line, dashed, double-line, or any other possible value.
border-width The 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:

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

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 Value Description
dashed It creates a dashed border.
dotted It creates a dotted border.
solid It creates a solid border.
none It removes existing borders from the element.
hidden It hides existing borders from the element.
double It creates a double line border.
ridge  It creates a border with 3-D rigged. Its outcome depends largely on the border-color value.
inset It creates a 3-D inset border. Its outcome depends largely on the border-color value.
groove It creates a border with 3-D grooved. The outcome depends largely on the border-color value.
outset It creates a 3-D outset border.

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

Example:

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; }

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:

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

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

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:

.classname {
    border: 4px solid aqua;
}

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:

.classname {
    border: 4px solid aqua;
    border-radius: 6px;
}
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram