Post
Ask Question

CSS Border Property in HTML: Part 2

Introduction

 
This is the second part of my article. If you have not read the previous articles then please go through the first part of that article: 
  1. CSS Border Property in HTML: Part I
CSS border-right Property
 
The border-right shorthand property sets all the right border properties in one declaration.
 
The properties that can be set, are (in order): border-right-width, border-right-style, and border-right-color.
  1. p  
  2. {  
  3. border-style:solid;  
  4. border-right:thick double #ff0000;  
  5. } 
border-right-in-HTML.png
 
CSS border-right-color Property
 
The border-right-color property sets the color of an element's right border.
 
Note: Always declare the border-style property before the border-right-color property. An element must have borders before you can change the color.
  1. p  
  2. {  
  3. border-style:solid;  
  4. border-right-color:#ff0000;  
  5. } 
border-right-color-in-HTML.png
 
CSS border-right-style Property
 
The border-right-style property sets the style of an element's right border.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <style type="text/css">  
  6.         p {  
  7.             border-style: solid;  
  8.         }  
  9.   
  10.         p.none {  
  11.             border-right-style: none;  
  12.         }  
  13.   
  14.         p.dotted {  
  15.             border-right-style: dotted;  
  16.         }  
  17.   
  18.         p.dashed {  
  19.             border-right-style: dashed;  
  20.         }  
  21.   
  22.         p.solid {  
  23.             border-right-style: solid;  
  24.         }  
  25.   
  26.         p.double {  
  27.             border-right-style: double;  
  28.         }  
  29.   
  30.         p.groove {  
  31.             border-right-style: groove;  
  32.         }  
  33.   
  34.         p.ridge {  
  35.             border-right-style: ridge;  
  36.         }  
  37.   
  38.         p.inset {  
  39.             border-right-style: inset;  
  40.         }  
  41.   
  42.         p.outset {  
  43.             border-right-style: outset;  
  44.         }  
  45.         </style>  
  46.     </head>  
  47.   
  48.     <body>  
  49.         <p class="none">No right border.</p>  
  50.         <p class="dotted">A dotted right border.</p>  
  51.         <p class="dashed">A dashed right border.</p>  
  52.         <p class="solid">A solid right border.</p>  
  53.         <p class="double">A double right border.</p>  
  54.         <p class="groove">A groove right border.</p>  
  55.         <p class="ridge">A ridge right border.</p>  
  56.         <p class="inset">An inset right border.</p>  
  57.         <p class="outset">An outset right border.</p>  
  58.     </body>  
  59.   
  60. </html> 
    CSS border-right-width Property
     
    The border-right-width property sets the width of an element's right border.
     
    Note: Always declare the border-style property before the border-right-width property. An element must have borders before you can change the width.
    1. p  
    2. {  
    3. border-style:solid;  
    4. border-right-width:15px;  
    5. } 
    border-right-width-in-HTML.png
     
    CSS border-spacing Property
     
    The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4.     <head>  
    5.         <style type="text/css">  
    6.         table.ex1 {  
    7.             border-collapse: separate;  
    8.             border-spacing: 10px;  
    9.         }  
    10.   
    11.         table.ex2 {  
    12.             border-collapse: separate;  
    13.             border-spacing: 10px 50px;  
    14.         }  
    15.         </style>  
    16.     </head>  
    17.   
    18.     <body>  
    19.         <table class="ex1" border="1">  
    20.             <tr>  
    21.                 <td>Peter</td>  
    22.                 <td>Griffin</td>  
    23.             </tr>  
    24.             <tr>  
    25.                 <td>Lois</td>  
    26.                 <td>Griffin</td>  
    27.             </tr>  
    28.         </table>  
    29.         <br />  
    30.         <table class="ex2" border="1">  
    31.             <tr>  
    32.                 <td>Cleveland</td>  
    33.                 <td>Brown</td>  
    34.             </tr>  
    35.             <tr>  
    36.                 <td>Glenn</td>  
    37.                 <td>Quagmire</td>  
    38.             </tr>  
    39.         </table>  
    40.     </body>  
    41.   
    42. </html> 
      border-spacing-in-HTML.png
       
      CSS border-style Property
       
      The border-style property sets the style of an element's four borders. This property can have from one to four values.
       
      Examples:
      • border-style: dotted solid double dashed;
        • the top border is dotted
        • the right border is solid
        • the bottom border is double
        • the left border is dashed
      • border-style:dotted solid double;
        • the top border is dotted
        • right and left borders are solid
        • the bottom border is double
      • border-style:dotted solid;
        • top and bottom borders are dotted
        • right and left borders are solid
      • border-style:dotted;
        • all four borders are dotted
      • none: Specifies no border
      • hidden: The same as "none", except in border conflict resolution for table elements
      • dotted: Specifies a dotted border
      • dashed: Specifies a dashed border
      • solid: Specifies a solid border
      • double: Specifies a double border
      • groove: Specifies a 3D grooved border. The effect depends on the border-color value
      • ridge: Specifies a 3D ridged border. The effect depends on the border-color value
      • inset: Specifies a 3D inset border. The effect depends on the border-color value
      • outset: Specifies a 3D outset border. The effect depends on the border-color value
      • inherit: Specifies that the border style should be inherited from the parent element
        1. <!DOCTYPE html>  
        2. <html>  
        3.   
        4.     <head>  
        5.         <style type="text/css">  
        6.         p.none {  
        7.             border-style: none;  
        8.         }  
        9.   
        10.         p.dotted {  
        11.             border-style: dotted;  
        12.         }  
        13.   
        14.         p.dashed {  
        15.             border-style: dashed;  
        16.         }  
        17.   
        18.         p.solid {  
        19.             border-style: solid;  
        20.         }  
        21.   
        22.         p.double {  
        23.             border-style: double;  
        24.         }  
        25.   
        26.         p.groove {  
        27.             border-style: groove;  
        28.         }  
        29.   
        30.         p.ridge {  
        31.             border-style: ridge;  
        32.         }  
        33.   
        34.         p.inset {  
        35.             border-style: inset;  
        36.         }  
        37.   
        38.         p.outset {  
        39.             border-style: outset;  
        40.         }  
        41.   
        42.         p.hidden {  
        43.             border-style: hidden;  
        44.         }  
        45.         </style>  
        46.     </head>  
        47.   
        48.     <body>  
        49.         <p class="none">No border.</p>  
        50.         <p class="dotted">A dotted border.</p>  
        51.         <p class="dashed">A dashed border.</p>  
        52.         <p class="solid">A solid border.</p>  
        53.         <p class="double">A double border.</p>  
        54.         <p class="groove">A groove border.</p>  
        55.         <p class="ridge">A ridge border.</p>  
        56.         <p class="inset">An inset border.</p>  
        57.         <p class="outset">An outset border.</p>  
        58.         <p class="hidden">A hidden border.</p>  
        59.     </body>  
        60.   
        61. </html> 
        border-style-in-HTML.png
         
        CSS border-top Property
         
        The border-top shorthand property sets all the top border properties in one declaration.
         
        The properties that can be set, are (in order): border-top-width, border-top-style, and border-top-color.
        1. p  
        2. {  
        3. border-style:solid;  
        4. border-top:thick double #ff0000;  
        5. } 
        border-top-in-HTML.png
        CSS border-top-color Property
         
        The border-top-color property sets the color of an element's top border.
         
        Note: Always declare the border-style property before the border-top-color property. An element must have borders before you can change the color.
        1. p  
        2. {  
        3. border-style:solid;  
        4. border-top-color:#ff0000;  
        5. } 
        border-top-color-in-HTML.png
         
        CSS border-top-style Property
         
        The border-top-style property sets the style of an element's top border.
        1. <!DOCTYPE html>  
        2. <html>  
        3.   
        4.     <head>  
        5.         <style type="text/css">  
        6.         p {  
        7.             border-style: solid;  
        8.         }  
        9.   
        10.         p.none {  
        11.             border-top-style: none;  
        12.         }  
        13.   
        14.         p.dotted {  
        15.             border-top-style: dotted;  
        16.         }  
        17.   
        18.         p.dashed {  
        19.             border-top-style: dashed;  
        20.         }  
        21.   
        22.         p.solid {  
        23.             border-top-style: solid;  
        24.         }  
        25.   
        26.         p.double {  
        27.             border-top-style: double;  
        28.         }  
        29.   
        30.         p.groove {  
        31.             border-top-style: groove;  
        32.         }  
        33.   
        34.         p.ridge {  
        35.             border-top-style: ridge;  
        36.         }  
        37.   
        38.         p.inset {  
        39.             border-top-style: inset;  
        40.         }  
        41.   
        42.         p.outset {  
        43.             border-top-style: outset;  
        44.         }  
        45.         </style>  
        46.     </head>  
        47.   
        48.     <body>  
        49.         <p class="none">No top border.</p>  
        50.         <p class="dotted">A dotted top border.</p>  
        51.         <p class="dashed">A dashed top border.</p>  
        52.         <p class="solid">A solid top border.</p>  
        53.         <p class="double">A double top border.</p>  
        54.         <p class="groove">A groove top border.</p>  
        55.         <p class="ridge">A ridge top border.</p>  
        56.         <p class="inset">An inset top border.</p>  
        57.         <p class="outset">An outset top border.</p>  
        58.     </body>  
        59.   
        60. </html> 
          border-top-style-in-HTML.png
           
          CSS border-top-width Property
           
          The border-top-width property sets the width of an element's top border.
           
          Note: Always declare the border-style property before the border-top-width property. An element must have borders before you can change the width.
          1. p  
          2. {  
          3. border-style:solid;  
          4. border-top-width:15px;  
          5. } 
           
          border-top-width-in-HTML.png
           
          CSS border-width Property
           
          The border-width property sets the width of an element's four borders. This property can have from one to four values.
           
          Examples:
          • border-width:thin medium thick 10px; 
            • top border is thin
            • right border is medium
            • the bottom border is thick
            • left border is 10px
          • border-width:thin medium thick;
            • the top border is thin
            • right and left borders are medium
            • bottom border is thick
          • border-width:thin medium;
            • top and bottom borders are thin
            • right and left borders are medium
          • border-width:thin;
            • all four borders are thin
          Note: Always declare the border-style property before the border-width property. An element must have borders before you can change the color.
          1. <!DOCTYPE html>  
          2. <html>  
          3.   
          4.     <head>  
          5.         <style type="text/css">  
          6.         p.one {  
          7.             border-style: solid;  
          8.             border-width: 5px;  
          9.         }  
          10.   
          11.         p.two {  
          12.             border-style: solid;  
          13.             border-width: medium;  
          14.         }  
          15.   
          16.         p.three {  
          17.             border-style: solid;  
          18.             border-width: 1px;  
          19.         }  
          20.         </style>  
          21.     </head>  
          22.   
          23.     <body>  
          24.         <p class="one">Some text.</p>  
          25.         <p class="two">Some text.</p>  
          26.         <p class="three">Some text.</p>  
          27.     </body>  
          28.   
          29. </html> 
            border-width-in-HTML.png
             
            CSS border-bottom-left-radius Property
             
            The border-bottom-left-radius property defines the shape of the border of the bottom-left corner.
             
            Tip:             This property allows you to add rounded borders to elements!
             
            Syntax
             
            border-bottom-left-radius: length|% [length|%];
             
            Note: The two length or percentage values of the border-bottom-left-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge.
             
            The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded.
             
            Percentages for the horizontal radius refer to the width of the border-box, whereas percentages for the vertical radius refer to the height of the border-box.
            1. <!DOCTYPE html>  
            2. <html>  
            3.   
            4.     <head>  
            5.         <style type="text/css">  
            6.         div {  
            7.             border: 2px solid;  
            8.             padding: 10px;  
            9.             background: #dddddd;  
            10.             border-bottom-left-radius: 2em;  
            11.         }  
            12.         </style>  
            13.     </head>  
            14.   
            15.     <body>  
            16.         <div>The border-bottom-left-radius property allows you to add a rounded border to the bottom-left corner.</div>  
            17.     </body>  
            18.   
            19. </html> 
              border-bottom-left-radius-in-HTML.png
               
              CSS border-bottom-right-radius Property
               
              The border-bottom-right-radius property defines the shape of the border of the bottom-right corner.
               
              Tip:               This property allows you to add rounded borders to elements!
               
              Syntax
               
              border-bottom-right-radius: length|% [length|%];
              1. div  
              2. {  
              3.      border:2px solid;  
              4.      padding:10px;  
              5.      background:#dddddd;  
              6.      border-bottom-right-radius:2em;  
              7. } 
              border-bottom-right-radius-in-HTML.png
               
              CSS border-image Property
               
              The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.
               
              Omitted values are set to their default values.
               
              Tip: Use the border-image-* properties to construct beautiful scalable buttons!
              1. <!DOCTYPE html>  
              2. <html>  
              3.   
              4.     <head>  
              5.         <style type="text/css">  
              6.         div {  
              7.             border-width: 15px;  
              8.             width: 250px;  
              9.             padding: 10px 20px;  
              10.         }  
              11.   
              12.         #round {  
              13.             -moz-border-image: url("border.png") 30 30 round;  
              14.             /* Firefox */  
              15.             -webkit-border-image: url("border.png") 30 30 round;  
              16.             /* Safari */  
              17.             -o-border-image: url("border.png") 30 30 round;  
              18.             /* Opera */  
              19.             border-image: url("border.png") 30 30 round;  
              20.         }  
              21.   
              22.         #stretch {  
              23.             -moz-border-image: url("border.png") 30 30 stretch;  
              24.             /* Firefox */  
              25.             -webkit-border-image: url("border.png") 30 30 stretch;  
              26.             /* Safari */  
              27.             -o-border-image: url("border.png") 30 30 stretch;  
              28.             /* Opera */  
              29.             border-image: url("border.png") 30 30 stretch;  
              30.         }  
              31.         </style>  
              32.     </head>  
              33.   
              34.     <body>  
              35.         <p><b>Note:</b> Internet Explorer does not support the border-image property.</p>  
              36.         <p>The border-image property specifies an image to be used as a border.</p>  
              37.         <div id="round">Here, the image is tiled (repeated) to fill the area.</div>  
              38.         <br />  
              39.         <div id="stretch">Here, the image is stretched to fill the area.</div>  
              40.         <p>Here is the image used:</p>  
              41.         <img src=klematis.png />  
              42.     </body>  
              43.   
              44. </html> 
                border-image-in-HTML.png
                 
                CSS border-radius Property
                 
                The border-radius property is a shorthand property for setting the four border-*-radius properties.
                 
                Tip:                 This property allows you to add rounded borders to elements!
                 
                Syntax
                 
                border-radius: 1-4 length|% / 1-4 length|%;
                1. div  
                2. {  
                3.     border:2px solid #a1a1a1;  
                4.     padding:10px 40px;  
                5.     background:#dddddd;  
                6.     width:300px;  
                7.     border-radius:25px;  
                8. } 
                border-radius-in-HTML.png
                 
                CSS border-top-left-radius Property
                 
                The border-top-left-radius property defines the shape of the border of the top-left corner.
                 
                Tip:                 This property allows you to add rounded borders to elements!
                 
                Syntax
                 
                border-top-left-radius: length|% [length|%];
                1. div  
                2. {  
                3.      border:2px solid;  
                4.      padding:10px;  
                5.      background:#dddddd;  
                6.      border-top-left-radius:2em;  
                7.     -webkit-border-top-left-radius:2em; /* Safari */  
                8. } 
                border-top-left-radius-in-HTML.png
                 
                CSS border-top-right-radius Property
                 
                The border-top-right-radius property defines the shape of the border of the top-right corner.
                 
                Tip: This property allows you to add rounded borders to elements!
                 
                Syntax
                 
                border-top-right-radius: length|% [length|%];
                1. div  
                2. {  
                3.       border:2px solid;  
                4.       padding:10px;  
                5.       background:#dddddd;  
                6.       border-top-right-radius:2em;  
                7.      -webkit-border-top-right-radius:2em; /* Safari */  
                8. } 
                border-top-right-radius-in-HTML.png
                 

                Summary

                 
                This article provides us the knowledge of Border Properties.


                Similar Articles