CSS: Esquinas Redondas
Caja
Este es un ejemplo de una caja con esquinas redondeadas.
Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.
Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.
Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.
Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.
Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.
esquinas_redondas.html 1 <html> 2 3 <head> 4 <title></title> 5 </head> 6 7 <style type="text/css"> 8 9 .redonda { 10 float: right; 11 background: #bfe5fd; /* color de fondo de la caja */ 12 margin: 0px 15px 0px 15px; 13 padding: 8px; 14 width: 200px; 15 } 16 17 .redonda:before { 18 background: transparent url('./css_esquinas_redondas/top_right.gif') no-repeat top right; 19 content: url('./css_esquinas_redondas/top_left.gif'); 20 display: block; 21 line-height: 0px; 22 margin: -8px -8px 0 -8px; 23 } 24 25 .redonda:after { 26 background: transparent url('./css_esquinas_redondas/bottom_right.gif') scroll no-repeat bottom right; 27 content: url('./css_esquinas_redondas/bottom_left.gif'); 28 display: block; 29 line-height: 0px; 30 margin: 0 -8px -8px -8px; 31 } 32 33 </style> 34 35 <body> 36 37 <div class="redonda"> 38 <h1>Caja</h1> 39 <p>Este es un ejemplo de una caja con esquinas redondeadas.</p> 40 </div> 41 42 <p>Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.</p> 43 <p>Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.</p> 44 <p>Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.</p> 45 <p>Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.</p> 46 <p>Ejemplo de una caja con los bordes redondeados, pero sin tablas con simples hojas de estilo.</p> 47 </body> 48 </html>
