HTML BORDER

HTML Border Design Examples and Tutorials

There are many kind of border style provided by HTML, Today in this article we will learn how to create different types of border using html and css.

Solid Border

 <div class="myborder">
      SCHAUHAN.IN Solid Border Example
   </div>

.myborder {
    width: 400px;
    height: 50px;
    padding: 10px;
    border: 5px solid #333;}

Border Radius

We can create rounded corner border using border-radius property.

<div class="myborder">
      SCHAUHAN.IN Border Radius  Example
   </div>

 .myborder 
  {width: 200px;
    height: 50px;
    padding: 10px;
    border: 5px solid #0000CC;
     border-radius:10px;}

Dotted Border

 <div class="myborder">
      SCHAUHAN.IN Dotted Border Example
   </div>
 .myborder { width: 200px;
    height: 50px;
    padding: 10px;
    border: 5px dotted #006600;}
  

Dashed Border

<div class="myborder">
      SCHAUHAN.IN Dashed Border Example
   </div>
.myborder {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 1px dashed #FF000}

Outset Border

 .myborder {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 10px outset #990066}
<div class="myborder">
      SCHAUHAN.IN Outset Border  Example
   </div>

Inset Border

<div class="myborder">
      SCHAUHAN.IN Inset Border  Example
   </div>
.myborder {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 10px inset #3300FF;}

Grooved Border

 <div class="myborder">
      SCHAUHAN.IN Grooved Border  Example
   </div>
 .myborder {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: 10px groove #3300FF; }

One Reply to “HTML BORDER

Leave a Reply

Your email address will not be published. Required fields are marked *