CSS Border & Overflow

CSS Border

CSS border-style property specifies what reasonably border to show. Styling something refers to adding that additional bit that makes the ultimate outcome stand out. we tend to use the CSS property border-style for outlining the road vogue on all four sides of a part as its border.

 Syntax:- The Following are the syntax of Border-style.

 border-style: solid| dotted| groove| dashed| none

 Example:-

  •  Border vogue With One Parameter:-

<!DOCTYPE html>

    <html>

    <head>

        <title>Border style with one parameter</title>

        <style type=”text/css”>

          h2{

            color: green;

            border-style: dotted;

            }

          p{

            color: skyblue;

            border-style:solid ;

            }

           h4{

            color: grey;

            border: inset;

            } 

        </style>

    </head>

    <body>

        <h1>Gurukulzone srcs</h1>

        <h2>This is the example of borer style with multiple parameter</h2>

        <p>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.

        </p>

        <h4>The SRCS Website tutorial.</h4>

    </body>

    </html>

 output:-

  •  Border vogue With Multiple Parameter:-
<!DOCTYPE html>
    <html>
    <head>
        <title>Border style with Multiple parameter</title>
        <style type="text/css">
          h2{
            color: green;
            border-style:groove double;
            }
          p{
            color: skyblue;
            border-style: inset dotted double;
            }
           h4{
            color: grey;
            border-style: double ridge outset dashed;            
           }  
        </style>
    </head>
    <body>
        <h1>Gurukulzone srcs</h1>
        <h2>This is the example of borer style with multiple parameter</h2>
        <p>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.
        </p>
        <h4>The SRCS Website tutorial.</h4>
    </body>
    </html>

output:-

CSS Overflow

The CSS overflow property specifies the way to handle the content once it overflows its block level instrumentation. It set what’s going to happen if the content of the page overflow from associate parts box space. This property usually has four values that ar oft employed in the appliance, they’re auto, hidden, scroll, visible.

 The detail description of all the four properties of the overflow are:-

  •  Scroll

 It adds a scroll bar to the additional content of the component.

 Syntax:- overflow: scroll;

 Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Scroll overflow</title>
        <style type="text/css">
            .sc{
                overflow: scroll;
                background-color: skyblue;
                width: 650px;
                height: 100px;
                border:2px solid green;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <div class="sc">
        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.
        </div>
    </body>
    </html>
                 

Output:-

  • Hidden

It nominative a little of the content solely and also the remainder of the content can hidden.

 Syntax:- overflow: hidden;

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of hidden overflow</title>
        <style type="text/css">
            .sc{
                overflow: hidden;
                background-color: skyblue;
                width: 650px;
                height: 100px;
                border:2px solid green;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <div class="sc">
        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.
         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.
        </div>
    </body>
    </html>

Output:-

  •  Auto

This automobile price is mechanically giving scrollbar if content isn’t match inside the dimension.

Syntax:- overflow: auto;

 Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of auto overflow</title>
        <style type="text/css">
            .sc{
                overflow: auto;
                background-color: skyblue;
                width: 650px;
                height: 100px;
                border:2px solid green;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <div class="sc">
        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.
        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.
        </div>
    </body>
    </html>
 

Output:-

  • Visible

Visible is that the default price for overflow property. that works an equivalent as a scroll. Syntax:- overflow: visible;

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of visible overflow</title>
        <style type="text/css">
            .sc{
                overflow: visible;
                background-color: skyblue;
                width: 650px;
                height: 100px;
                border:2px solid green;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <h2>Example of overflow: visible</h2>
        <div class="sc">
        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.
         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.
        </div>
    </body>
    </html>

Output:-