CSS Borders Example

First Page
Next Page

CSS Borders Example

  • border-color example
  • border-style example
  • border-width example

Border-color Property Example

<!DOCTYPE HTML>
<html>
   <head>
   
      <style type="text/css">
         p.example1{
            border:1px solid;
            border-bottom-color:#00FFFF; 
            border-top-color:#0000FF;    
            border-left-color:#A52A2A;   
            border-right-color:#7FFF00; 
         }
         p.example2{
            border:1px solid;
            border-color:#006400;        
         }
      </style>
      
   </head>
   <body>
   
      <p class="example1">
      This example is showing all borders in different colors.
      </p>
      
      <p class="example2">
      This example is showing all borders in different color only.
      </p>
      
   </body>
</html>

Output

Border-style Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Border Style Property Example</title>
      <style>
         p.none {border-style: none;}
         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.hidden {border-style: hidden;}
      </style>
   </head>
   <body>
      <p class="none">No border.</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="hidden">A hidden border.</p>
   </body>  
</html>

Output

Border-width Property Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>Border Width Property Example</title>
      <style>
         p.one {
            border-style: solid;
            border-width: 4px;
         }

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

         p.three {
            border-style: solid;
            border-width: 2px;
         }
      </style>
   </head>
   <body>
      <p class="one">My Name is Ammu.</p>
      <p class="two">My Name is Ammu.</p>
      <p class="three">My Name is Ammu.</p>
   </body>  
</html>

Output

First Page
Next Page