Paragraph with various border styles : p border « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p border

Paragraph with various border styles

    


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {font-family:arial, verdana, sans-serif;}

p{border-color:#000000;}

.none {border-style:none;}
.solid {border-style:solid;}
.dotted {border-style:dotted;}
.dashed {border-style:dashed;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}
.hidden {border-style:hidden;}
</style>

</head>

<body>
<p class="none">This paragraph has a border-style property set to none.</p>
<p class="solid">This paragraph has a border-style property set to solid.</p>
<p class="dotted">This paragraph has a border-style property set to dotted.</p>
<p class="dashed">This paragraph has a border-style property set to dashed.</p>
<p class="double">This paragraph has a border-style property set to double.</p>
<p class="groove">This paragraph has a border-style property set to groove.</p>
<p class="ridge">This paragraph has a border-style property set to ridge.</p>
<p class="inset">This paragraph has a border-style property set to inset.</p>
<p class="outset">This paragraph has a border-style property set to outset.</p>
<p class="hidden">This paragraph has a border-style property set to hidden.</p>
</body>
</html>








Related examples in the same category

1.This is a paragraph with an inset border
2.This is a paragraph with a solid border
3.This is a paragraph with a dotted border
4.This is a paragraph with a dashed border
5.This is a paragraph with a double border
6.This is a paragraph with a groove border
7.This is a paragraph with a ridge border
8.p border: 1px solid steelblue;
9.p border:solid black 1px;
10.p border: 1px solid rgb(200, 200, 200);
11.p border: 1px solid rgb(29, 179, 82);
12.p border: none;
13.p border: 1px solid lightblue;
14.p border-top: solid;
15.p {border-style:solid; border-color:#000000; border-width:2px; padding:5px; width:200px; background-color:#FFFFFF;}
16.Use border the wrap around a paragraph
17.paragraph with various border style
18.p border: 1px solid black;