-->

  • CSS border

    Kumar Atul Jaiswal
    CSS Border


    CSS   BORDER 



     I have a red border on Bottom side.

                               
    _________________________    

                                I have a red border on Top side.






    I have borders on all sides.







    |  I have a blue left border.




    Example



    <!DOCTYPE html>
    <html>
    <head>

    <title> Border Style </title>


    <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; }
    p.mix { border-style: dotted dashed solid double; }



    </style>
    </head>


    <body>


    <h2>The border-style Property</h2>
    <p>This property specifies what kind of border to display</p>

    <p class="dotted">A dotted border.</p>
    <p class="dashed">A dashed border.</p>
    <p class="solid">A solid border.</p>
    <p class="double">A double border.</p>
    <p class="groove">A groove border.</p>
    <p class="ridge">A ridge border.</p>
    <p class="inset">An inset border.</p>
    <p class="outset">An outset border.</p>
    <p class="none">No border.</p>
    <p class="hidden">A hidden border.</p>
    <p class="mix">A mixed border.</p>


    </body>
    </html>




    Result




    Kumar Atul Jaiswal



    Border-width 

    The border width property specifies the width of the four borders.
    The width can be set as a specific size ( in px, pt, em, cm etc ) or by using on of the three pre-defined values : thin, medium or thick. 
    The border-width  property can have from one to four values ( for the top border, right border, bottom border and the left border. ). 




    Kumar Atul Jaiswal




    Example



    <!DOCTYPE html>
    <html>
    <head>

    <style>
    p.one {
      border-style: solid;
      border-width: 5px;
    }

    p.two {
      border-style: solid;
      border-width: medium;
    }

    p.three {
      border-style: dotted;
      border-width: 2px;
    }

    p.four {
      border-style: dotted;
      border-width: thick;
    }

    p.five {
      border-style: double;
      border-width: 15px;
    }

    p.six {
      border-style: double;
      border-width: thick;
    }

    p.seven {
      border-style: solid;
      border-width: 2px 10px 4px 20px;

    }

    </style>
    </head>


    <body>


    <h2>The border-style Property</h2>
    <p>his property specifies the width of the four borders:</p>

    <p class="one">some text.</p>
    <p class="two">some text.</p>
    <p class="three">some text.</p>
    <p class="four">some text.</p>
    <p class="five">some text.</p>
    <p class="six">some text.</p>
    <p class="seven">some text.</p>


    </body>
    </html>




    Result





    Border Color 

    The border color property is used to set  the color of the four borders colors.
    • The Boder can be set by :-



    • Name  :-  Specifies the color name ,like  "Red".
    • Hex :-     Specifies the hex value,like #f00;
    • RGB :-  Specifes the RGB value, like "rgb(255, 0, 0)"
    • Transparent




    The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

    If border-color is not set, it inherits the color of the element.

    Example 
    <!DOCTYPE html>
    <html>
    <head>

    <style>
    p.one {
      border-style: solid;
      border-color: red;
    }

    p.two {
      border-style: solid;
      border-color: green;
    }

    p.three {
      border-style: solid;
      border-color; red green blue yellow;
    }


    </style>
    </head>


    <body>


    <h2>The border-style Property</h2>
    <p>This property specifies the color of the four borders:</p>

    <p class="one">Kumar Atul Jaiswal. A solid red border</p>
    <p class="two">Kumar Atul JaiswalA solid red border</p>
    <p class="three">Kumar Atul Jaiswal. A solid multicolor border</p>

    <p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first</p>

    </body>
    </html>




    Result





    Border Short-Hand Property

    The border property is a shorthand property for the following individual border properties:


    • border-width
    • border-style (required)
    • border-color



    Left Border


    Example 
    <!DOCTYPE html>
    <html>
    <head>

    <style>
    p.one {
      border-left:  6px solid red;
      background-color : lightgrey;
    }

    </style>
    </head>


    <body>


    <h2>The border left Property</h2>
    <p>his property is a shorthand property for border-left-width, border-left-style, and border-left-color.: Kumar Atul Jaiswal.</p>


    </body>
    </html>




    Result


    Bottom Border


    Example 
    <!DOCTYPE html>
    <html>
    <head>

    <style>
    p.one {
      border-bottom:  6px solid red;
      background-color : lightgrey;
    }

    </style>
    </head>


    <body>


    <h2>The border bottom Property</h2>
    <p>his property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.: Kumar Atul Jaiswal.</p>


    </body>
    </html>




    Result





    Rounded Border

    The border-radius property is used to add rounded borders to an element:



    Example 
    <!DOCTYPE html>
    <html>
    <head>

    <style>
    p.normal1 {
      border: 2px solid  red;
    }

    p.round1 {
      border: 2px solid  red;
      border-radius : 5px;
    }

    p.round2 {
       border: 2px solid  red;
      border-radius : 8px;
    }

    p.round3 {
      border: 2px solid  red;
      border-radius : 12px;
    }


    </style>
    </head>


    <body>

    <h2>The border-radius Property</h2>
    <p>This property is used to add rounded borders to an element:</p>

    <p class="normal1">Kumar Atul Jaiswal. Normal Border</p>
    <p class="round1">Kumar Atul Jaiswal. Round Border</p>
    <p class="round2">Kumar Atul Jaiswal. Rounder border</p>
    <p class="round3">Kumar Atul Jaiswal. Roundest border</p>


    <p><b>Note:</b>  The "border-radius" property is not supported in IE8 and earlier versions</p>

    </body>
    </html>




    Result





    Video Tutorial :- SooN


    Have a Nice Stay Here  : - )
























































  • 0 comments:

    Post a Comment

    For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.