saftutorials.com
CSS Borders Tutorial

CSS Border is most important property of CSS for a website. There are majority HTML tag support CSS Border property

By this tutorials you can learn

1) How to use CSS Border?

2) Kinds of CSS Border Style?

3) Example of CSS Border Style.

How to use CSS Border?

CSS Border use in a style code area -  like:  border: 1px solid #000000; Where border = property name; 1px = border thickness; solid = border style; #000000 = border color code you can use color name like red, green, blue etc. Find out more HTML Color Code.


Kinds of CSS Border Property Style?

1) border: solid - for solid border.

2) border: dotted - for dotted border.

3) border: double - for double line border.

4) border: ridge - for ridge style border.

5) border: inset - for inset style border.

6) border: outset - for out side style border. 

7) border: none - for no border.

8) border: hidden - for hidden border.

9) border: dashed- for dashed style border.

10) border: thick - for thick style border.

11) border: thin - for thin style border.

Example of CSS Border Property Style

CSS Border style examples.
<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Border Styles.</title>
  <style type="text/css">
    .border-solid{ border:2px solid red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-dotted{ border:2px dotted red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-double{ border:3px double red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-ridge{ border:2px ridge red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-inset{ border:2px inset red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-outset{ border:2px outset red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-none{ border:2px none red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-hidden{ border:2px hidden red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-dashed{ border:2px dashed red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-thick{ border:2px thick red; width: 100%; height: 35px; margin-top:5px; float:left; }
    .border-thin{ border:2px thin red; width: 100%; height: 35px; margin-top:5px; float:left; }
  </style>
</head>
<body>
<p class="border-solid">Example for border solid.</p>
<p class="border-dotted">Example for border dotted.</p>
<p class="border-double">Example for border double.</p>
<p class="border-ridge">Example for border ridge.</p>
<p class="border-inset">Example for border inset.</p>
<p class="border-outset">Example for border outset.</p>
<p class="border-none">Example for border none.</p>
<p class="border-hidden">Example for border hidden.</p>
<p class="border-dashed">Example for border dashed.</p>
<p class="border-thick">Example for border thick.</p>
<p class="border-thin">Example for border thin.</p>
</body>
</html>

Example for border solid.

Example for border dotted.

Example for border double.

Example for border ridge.

Example for border inset.

Example for border outset.

Example for border none.

Example for border hidden.

Example for border dashed.

Example for border thick.

Example for border thin.


Different Border with 4 side

You can change CSS Border property 4 side with different style and color.

Example

Example of CSS border All side different color and style.

Example of CSS left border.

Example of CSS right border.

Example of CSS top border.

Example of CSS bottom border.

Source Code

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Border Styles.</title>
  <style type="text/css">
    .border-4side{ 
      border-left:2px solid red; 
      border-right:2px dashed green; 
      border-top:2px dashed blue; 
      border-bottom:2px dotted red; 
      width: 100%; 
      height: 50px; 
      margin-top:5px; 
      float:left; 
    }
    .border-left{ 
      border-left:2px solid red; 
      width: 100%; 
      height: 50px; 
      margin-top:5px; 
      float:left; 
    }
    .border-right{ 
      border-right:2px dashed green; 
      width: 100%; 
      height: 50px; 
      margin-top:5px; 
      float:left; 
    }
    .border-top{ 
      border-top:2px dashed blue; 
      width: 100%; 
      height: 50px; 
      margin-top:5px; 
      float:left; 
    }
    .border-bottom{ 
      border-bottom:2px dotted red; 
      width: 100%; 
      height: 50px; 
      margin-top:5px; 
      float:left; 
    }
  </style>
</head>
<body>
<p class="border-4side">Example of CSS border All side different color and style.</p>
<p class="border-left">Example of CSS left border.</p>
<p class="border-right">Example of CSS right border.</p>
<p class="border-top">Example of CSS top border.</p>
<p class="border-bottom">Example of CSS bottom border.</p>
</body>
</html>


CSS Border Radius

You can make your div circle using CSS border radius.

Example

CSS Border Radius 50%
CSS Border Radius 30px
CSS Border Radius Top Left 50px
CSS Border Radius Top Right 50px
CSS Border Radius Bottom Right 50px
CSS Border Radius Bottom Left 50px
CSS Border Radius 4 side Different


 


Source Code

<!DOCTYPE html>
<html>
<head>
  <title>Example of CSS Border Radius.</title>
  <style type="text/css">
    .border-radius50prnt{ 
      border:2px solid red;
      border-radius: 50%; 
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
    .border-radius50px{ 
      border:2px solid green;
      border-radius: 30px; 
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
    .border-radius-topleft{ 
      border:2px solid blue;
      border-top-left-radius: 50px; 
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
    .border-radius-topright{ 
      border:2px solid black;
      border-top-right-radius: 50px; 
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
    .border-radius-bottomright{ 
      border:2px solid yellow;
      border-bottom-right-radius: 50px;
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
    .border-radius-bottomleft{ 
      border:2px solid green;
      border-bottom-left-radius: 50px;
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
    .border-radius-4sidedif{ 
      border:2px solid blue;
      border-radius: 50% 0px 30px 10px;
      width: 43%;
      text-align: center;
      line-height: 200px; 
      height: 200px; 
      margin:5px;
      float:left; 
    }
  </style>
</head>
<body>
<div class="border-radius50prnt"> CSS Border Radius 50%</div>
<div class="border-radius50px"> CSS Border Radius 30px</div>
<div class="border-radius-topleft"> CSS Border Radius Top Left 50px</div>
<div class="border-radius-topright"> CSS Border Radius Top Right 50px</div>
<div class="border-radius-bottomright"> CSS Border Radius Bottom Right 50px</div>
<div class="border-radius-bottomleft"> CSS Border Radius Bottom Left 50px</div>
<div class="border-radius-4sidedif"> CSS Border Radius 4 side Different</div>
</body>
</html>



Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic