Copyright © tutorialspoint.com

CSS - Borders

previous next


Advertisements

The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change

Now we will see how to use these properties with examples.

The border-color Property:

The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties:

Here is the example which shows effect of all these properties:

<style type="text/css">
p.example1{
   border:1px solid;
   border-bottom-color:#009900; /* Green */
   border-top-color:#FF0000;    /* Red */
   border-left-color:#330000;   /* Black */
   border-right-color:#0000CC;  /* Blue */
}
p.example2{
   border:1px solid;
   border-color:#009900;        /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
</p>

This will produce following result:

This example is showing all borders in different colors.

This example is showing all borders in green color only.

To Become more comfortable - Do Online Practice

The border-style Property:

The border-style property allows you to select one of the following styles of border:

You can individually change the style of the bottom, left, top, and right borders of an element using following properties:

Following is the example to show all these border styles:

<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.
</p>
<p style="border-width:4px; border-style:double;">
This is a double border.
</p>
<p style="border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge">
This is aridge  border.
</p>
<p style="border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style="border-width:4px; 
             border-top-style:solid;
             border-bottom-style:dashed;
             border-left-style:groove;
             border-right-style:double;">
This is a a border with four different styles.
</p>

This will produce following result:

This is a border with none width.

This is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

This is a a border with four different styles.

To Become more comfortable - Do Online Practice

The border-width Property:

The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.

You can individually change the width of the bottom, top, left, and right borders of an element using the following properties:

Following is the example to show all these border width:

<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style="border-bottom-width:4px;
             border-top-width:10px;
             border-left-width: 2px;
             border-right-width:15px;
             border-style:solid;">
This is a a border with four different width.
</p>

This will produce following result:

This is a solid border whose width is 4px.

This is a solid border whose width is 4pt.

This is a solid border whose width is thin.

This is a solid border whose width is medium;

This is a solid border whose width is thick.

This is a a border with four different width.

To Become more comfortable - Do Online Practice

Border Properties Using Shorthand:

The border property allows you to specify color, style, and width of lines in one property:

Following is the example to show to use all the three properties into a single property. This is the most frequently used property to set border around any element.

<p style="border:4px solid red;">
This example is showing shorthand property for border.
</p>

This will produce following result:

This example is showing shorthand property for border.

To Become more comfortable - Do Online Practice

previous next

Copyright © tutorialspoint.com