<title>BORDER STYLE</title>
<head>
<p>this is an example <br> an is a good one</p>
<style>
p{width: 250px; border: 3px dotted #0088dd;}
</style>
<style>
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
</style>
<style>
p.one {border-color: #24ff19; border-width: 2px; border-style: solid;}
p.two {border-width: thick; border-style: dotted; border-top-color: #ee1015;}
p.three {border-width: 1px 4px 12px 4px; border-style: dashed; border-color: darkcyan #aa55a8 #7596fa blue;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
</style>
<style>
p { width: 250px;
border: 3px dotted #0088dd;}
p.one {
border-color: #24ff19;
border-width: 2px;
border-style: solid;
}
p.two {
border-width: thick;
border-style: dotted;
border-top-color: #ee1015;}
p.three {
border-width: 1px 4px 12px 4px;
border-style: dashed;
border-color: darkcyan #aa55a8 #7596fa blue}
p.four {
border-width: 2px;
border-style: double;
padding: 10px;}
p.five {
border-width: thick;
border-style: groove;
padding: 5px 3px 8px 12px;}
p.six {
border: 2px solid #0088dd;}
p.seven {
border-width: 2px;
border-style: inset;
padding: 10px 5px 10px 5px}
p.eight {
border-width: thick;
border-style: outset;
padding: 20px 15px 20px 10px;}
</style>
</head>
<body>
<p class="one">Wurlitzer Electric Plano</p>
<p class="two">Wurlitzer Electric Plano</p>
<p class="three">Wurlitzer Electric Plano</p>
<p class="four">Wurlitzer Electric Plano</p>
<p class="five">Wurlitzer Electric Plano</p>
<p class="six">Wurlitzer Electric Plano</p>
<p class="seven">Wurlitzer Electric Plano</p>
<p class="eight">Wurlitzer Electric Plano</p>
</body>
</html>
No hay comentarios:
Publicar un comentario