CSS – Borders

  • CSS – Borders

    • CSS – Borders Lesson

      To specify borders within a box, different properties in HTML page can be given using CSS. These properties are as below,

      • Border-color: it specifies the border’s color in the appropriate position like top, bottom, left and right.

      • Border-style: it specifies the type of the border like solid, double line, dashed line, inset, outset, hidden, etc. It also specifies the location like top, bottom, left and right.

      • Border-width: it determines the width of the border in the appropriate position like top, bottom, left and right.


      Example:

      <html>

         <head>

            <style type = "text/css">

               p.example1 {

                  border:1px solid;

                  border-bottom-color:#009900; /* Green */

                  border-top-color:#FF0000;    /* Red */

                  border-left-color:#330000;   /* Black */

                  border-right-color:#0000CC;  /* Blue */

               }

               </style>

         </head>

         <body>

            <p class = "example1">

               This demonstrates all borders in different colors.

            </p>

            <p style = "border-width:4px; border-style:none;">

               This is a border with none width.

            </p>

             <p style = "border-width:4px; border-style:solid;">

               This is a solid border.

            </p>

             <p style = "border-width:4px; border-style:dashed;">

               This is a dashed border.

            </p>

              <p style = "border-width:4px; border-style:double;">

               This is a double border.

            </p>

             <p style = "border-width:4px; border-style:groove;">

               This is a groove border.

            </p>

            

            <p style = "border-width:4px; border-style:ridge">

               This is a ridge  border.

            </p>

             <p style = "border-width:4px; border-style:inset;">

               This is a inset border.

            </p>

              <p style = "border-width:4px; border-style:outset;">

               This is a outset border.

            </p>

              <p style = "border-width:4px; border-style:hidden;">

               This is a hidden border.

            </p>

            <p style = "border-bottom-width:2px;border-top-width:12px;

               border-left-width: 6px;border-right-width:6px;border-style:solid;">

               This is a  border with four different width.

            </p>

            <p style = "border:3px solid blue;">

               This example demonstrates color, width and style property for border at once.

            </p>

         </body>

      </html>


      Output:

      Quiz :

      Quiz 1: What are the various properties used in border using CSS?

      Quiz 2: What is border-style?  Give different types of styles in CSS with examples.



CSS – Tables
CSS – Margins