ingenieradesistemas
499751083497328
Cargando...

Bordes en CSS3



La inclusión de bordes en un documento HTML5 es muy sencillo y se apoya con los estilos de CSS3, los estilos pueden insertarse en el mismo documento o pueden ser externos en un archivo con extensión .css. En este ejemplo veremos la forma de insertar una caja con bordes redondeados en la parte superior.

Bordes en CSS3

El código es como sigue:

<!DOCTYPE html>
<html>
<head>
     <title>Bordes con CSS3</title> 
     <style type="text/css">
      div {
       border: 2px solid black;
       padding: 10px 40px;
       background: green;
       width: 400px;
       border-radius: 20px 20px 0px 0px;
      }
     </style>
</head>
<body>
 <div>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.
 </body>     
</html>

Y el resultado en pantalla es:

Bordes en CSS3
Es posible también realizar bordes con sombreado, tan solo se añade otra línea de código como verán en este ejemplo:
<!DOCTYPE html>
<html>
<head>
     <title>Bordes con sombreado CSS3</title> 
     <style type="text/css">
      div {
       width: 400px;
       height: 400px;
       background-color: green;
       box-shadow: 10px 10px 10px blue;
      }
     </style>
</head>
<body>
 <div>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.<br>Texto de ejemplo dentro de un cuadro redondeado.
 </div>
  
 </div>
</body>     
</html>

El resultado en pantalla es este:

Bordes en CSS3


HTML5 y CSS3 8287534133050779575

Publicar un comentario Default Comments

emo-but-icon

Página principal item

Los apuntes en tu correo

Síguenos en Facebook

Apuntes aleatorios