Border Styles

Border styles can be applied to different html elements using the following css border properties

border-style

border-width

border-color

border

 

border-style

specified the type of the border to be applied to the html element

 

values for this property are: dotted, dashed, solid, double, none etc

 

We can assign same value to 4 sides of border or assign 4 different values to each border.

 

<!DOCTYPE html>

<html>

<head>

<style>

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.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

 

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</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=”none”>No border.</p>

<p class=”hidden”>A hidden border.</p>

<p class=”mix”>A mixed border.</p>

 

</body>

</html>

 

border-width

used to specify width of the border.  The value of border can be entered in px, cm, pt, em etc. or you can also use pre-defined values thin, medium or thick

 

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

  border-style: solid;

  border-width: 5px;

}

 

p.two {

  border-style: solid;

  border-width: medium;

}

 

p.three {

  border-style: dotted;

  border-width: 2px;

}

 

p.four {

  border-style: dotted;

  border-width: thick;

}

 

p.five {

  border-style: double;

  border-width: 15px;

}

 

p.six {

  border-style: double;

  border-width: thick;

}

</style>

</head>

<body>

 

<h2>The border-width Property</h2>

<p>This property specifies the width of the four borders:</p>

 

<p class=”one”>Some text.</p>

<p class=”two”>Some text.</p>

<p class=”three”>Some text.</p>

<p class=”four”>Some text.</p>

<p class=”five”>Some text.</p>

<p class=”six”>Some text.</p>

 

<p><b>Note:</b> The “border-width” property does not work if it is used alone.

Always specify the “border-style” property to set the borders first.</p>

 

</body>

</html>

 

You can also specify different width values to different sides

 

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

  border-style: solid;

  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */

}

 

p.two {

  border-style: solid;

  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */

}

 

p.three {

  border-style: solid;

  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

}

</style>

</head>

<body>

 

<h2>The border-width Property</h2>

<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

 

<p class=”one”>Some text.</p>

<p class=”two”>Some text.</p>

<p class=”three”>Some text.</p>

 

</body>

</html>

 

border-color

used to specify the color of the border.  We can specify the color using name, rgb or hex values

 

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

  border-style: solid;

  border-color: red;

}

 

p.two {

  border-style: solid;

  border-color: green;

}

 

p.three {

  border-style: dotted;

  border-color: blue;

}

</style>

</head>

<body>

 

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

 

<p class=”one”>A solid red border</p>

<p class=”two”>A solid green border</p>

<p class=”three”>A dotted blue border</p>

 

<p><b>Note:</b> The “border-color” property does not work if it is used alone. Use the “border-style” property to set the borders first.</p>

 

</body>

</html>

 

Different colors

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

  border-style: solid;

  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */

}

</style>

</head>

<body>

 

<h2>The border-color Property</h2>

<p>The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

 

<p class=”one”>A solid multicolor border</p>

 

</body>

</html>

 

border-radius

used to specify rounded corners for the borders

 

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

  border: 2px solid red;

  padding: 5px;

}

 

p.round1 {

  border: 2px solid red;

  border-radius: 5px;

  padding: 5px;

}

 

p.round2 {

  border: 2px solid red;

  border-radius: 8px;

  padding: 5px;

}

 

p.round3 {

  border: 2px solid red;

  border-radius: 12px;

  padding: 5px;

}

</style>

</head>

<body>

 

<h2>The border-radius Property</h2>

<p>This property is used to add rounded borders to an element:</p>

 

<p class=”normal”>Normal border</p>

<p class=”round1″>Round border</p>

<p class=”round2″>Rounder border</p>

<p class=”round3″>Roundest border</p>

 

</body>

</html>


You cannot copy content of this page