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