Styling HTML : CSS Borders

Introduction to CSS BORDERS

CSS Border is a property that allow you to style the edge of HTML elements such as colour, width and type

Border style

Border-style property allow you to choose the type of border you want. Below are the available styles you can use.

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border.
ridge - Defines a 3D ridged border.
inset - Defines a 3D inset border.
outset - Defines a 3D outset border.
none - Defines no border
hidden - Defines a hidden border

Examples of border-style

p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}

Border color

Border-color is a css property that allow you to specify color of HTML element borders.

Border color can be set using the the following four ways

color name : by specifying color name, e.g. "green"
Hex value : by specifying hexadecimal value, e.g. "#f4f4f4"
RGB : by specifying RGB value, e.g. "rgb(255, 99, 71)"
transparent : by setting it to transparent

Border Sides

Generally, border can be set in four sides, namely left, right, top, and bottom.
However, CSS provide properties that can be used to style individual border sides of HTML element

Examples of

p {
       border-color : blue;
           border-top-style: dotted;
    }

    p {
       border-color : blue;
       border-right-style: solid;
    }

    p {
       border-color : blue;
       border-bottom-style: dotted;
    }

    p {
       border-color : blue;
       border-left-style: solid;
    }

*Border Shorthand *

Like all major languages, CSS allows you to use shorthand when using border properties.
As you can see there are many properties to consider when using borders. But when the code is shortened, it is possible to style your border in one property using "border" property.
You can also style one side using "border-left","border-right","border-top" or "border-bottom".

Example

p {
       border: 3px dotted blue;
      }

    p {
       border-left: 5px solid blue;
      }

    p {
       border-right: 5px solid blue;
      }

     p {
        border-top: 5px solid blue;
       }

     p {
        border-bottom: 5px solid blue;
       }

Rounded Borders

In order to add rounded corners to your border, CSS has a property that allows you to do it using "border-radius".

Example

p {
        border: 3px solid blue;
        border-radius : 7px
      }

All CSS Border Properties

border : Sets all the border properties in one declaration
border-bottom : Sets all the bottom border properties in one declaration
border-bottom-color : Sets the color of the bottom border
border-bottom-style : Sets the style of the bottom border
border-bottom-width : Sets the width of the bottom border
border-color : Sets the color of the four borders
border-left : Sets all the left border properties in one declaration
border-left-color : Sets the color of the left border
border-left-style : Sets the style of the left border
border-left-width : Sets the width of the left border
border-radius : Sets all the four border-*-radius properties for rounded corners
border-right : Sets all the right border properties in one declaration
border-right-color : Sets the color of the right border
border-right-style : Sets the style of the right border
border-right-width : ets the width of the right border
border-style : Sets the style of the four borders
border-top : Sets all the top border properties in one declaration
border-top-color : Sets the color of the top border
border-top-style : Sets the style of the top border
border-top-width : Sets the width of the top border
border-width : Sets the width of the four borders