Tres ejemplos de bordes diferentes

CSS newbie nos muestra algunos ejemplos de las posibilidades que nos brinda la propiedad border. Jugando un poco con eso, podemos divertirnos un buen rato:

un ejemplo


<style>
.borde1 {
background: #FFFFFF url(UNA_IMAGEN) no-repeat 50% 50%;
border: 12px dashed #1B1A19;
height: 307px;
margin: 0 auto;
padding: 36px;
width: 250px;
}
.borde1 p {
color: #FFF;
margin: 10px 10px 0 0;
font: bold 36px Georgia, 'Times New Roman', Times, serif;
text-align: right;
}
</style>

<div class="borde1"><p> texto ejemplo </p></div>


Praesent mattis orci eget ligula imperdiet nec pellentesque augue pellentesque.


<style>
.borde2 {
-moz-border-radius: 8px;
background-color: CornflowerBlue;
border: 2px outset CornflowerBlue;
margin: 0 auto;
padding: 1px 10px;
text-align: center;
width: 250px;
}
.borde2 p {
border: 3px dashed AliceBlue;
color: #FFFFFF;
font-size: 16px;
padding: 10px;
}
</style>

<div class="borde2"><p> texto ejemplo </p></div>


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


<style>
div.borde3 {
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-color: #AABBCC #AABBCC #AABBCC transparent;
border-style: solid;
border-width: 15px 15px 15px 20px;
margin: 0 auto;
padding: 0;
width: 500px;
}
div.borde3 p {
margin: 0;
padding: 5px;
text-align: right;
}
</style>
<div class="borde3"><p> texto ejemplo </p></div>

0 comentarios:

Publicar un comentario