CSS Multiple Border

Multiple borders in CSS is done by box-shadow property. Box-shadow property isn’t for multiple borders, but still, we tend to ar making multiple borders with box-shadow property.

Syntax:-

   

div
    {
        box-shadow: value1 value2 value3 value4 value5;
    }
  • Value1:-

h-offset, provides horizontal shadow. we tend to don’t seem to be interested of this thus create it zero.

  • Value2:-

v-offset, provides vertical shadow. we tend to don’t seem to be interested of this thus create it zero.

  • Value3:-

blur, provides blur shadow. we tend to don’t seem to be interested of this thus create it zero.

  • Value4:-

Gives shadow. This shadow we are going to use it as border in our demand.

  • Value5:-

Gives color to frame.

Example:-

1. Example of 2 border

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Multiple border</title>
        <style type="text/css">
            .multiborder{
                height: 500px;
                width: 500px;
                text-align:justify;
                background: green;
                margin-left: 10px;
                box-shadow: 0 0 0 8px brown,
                            0 0 0 12px blue;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <h2>Example of 2 borders</h2>
        <div class="multiborder">
        <h3>Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse           
        cillum dolore eu fugiat nulla pariatur. 
        </h3>
    </div>
    </body>
    </html>

Output:-

2. Example of 3 border

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Multiple border</title>
        <style type="text/css">
            .multiborder{
                height: 500px;
                width: 500px;
                text-align:justify;
                background: green;
                margin-left: 10px;
                box-shadow: 0 0 0 8px blue,
                            0 0 0 12px pink,
                            0 0 0 20px grey;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <h2>Example of 3 borders</h2>
        <div class="multiborder">
        <h3>Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse           
        cillum dolore eu fugiat nulla pariatur. 
        </h3>
    </div>
    </body>
    </html>

Output:-

3. Example of 4 border

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Multiple border</title>
        <style type="text/css">
            .multiborder{
                height: 500px;
                width: 500px;
                text-align:justify;
                background: green;
                margin-left: 30px;
                box-shadow: 0 0 0 8px blue,
                            0 0 0 12px pink,
                            0 0 0 20px grey,
                            0 0 0 15px white;;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <h2>Example of 4 borders</h2>
        <div class="multiborder">
        <h3>Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse           
        cillum dolore eu fugiat nulla pariatur. 
        </h3>
    </div>
    </body>
    </html>
 

Output:

4. Example of 5 border

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Multiple border</title>
        <style type="text/css">
            .multiborder{
                height: 500px;
                width: 500px;
                text-align:justify;
                background: green;
                margin-left: 30px;
                box-shadow: 0 0 0 8px blue,
                            0 0 0 12px pink,
                            0 0 0 20px grey,
                            0 0 0 25px white,
                            0 0 0 30px orange;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <h2>Example of 5 borders</h2>
        <br>
        <div class="multiborder">
        <h3>Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor 
        in reprehenderit in voluptate velit esse           
        cillum dolore eu fugiat nulla pariatur. 
        </h3>
    </div>
    </body>
    </html>

Output:

Leave a Reply

Your email address will not be published. Required fields are marked *