Listado completo de tutoriales

21 - Propiedades relacionadas al border (FORMATO RESUMIDO)


Podemos inicializar todos los bordes con una sola propiedad:

border

Debemos indicar el border-width border-style border-color

No debemos separarlas por coma y deben estar especificados en ese orden.

Por ejemplo:

h1 {
  border:1px solid #ff0000;
}

Por otro lado podemos inicializar cada borde con:

border-top
border-right
border-bottom
border-left

Debemos indicar el border-(top/right/bottom/left): width border-style border-color

Veamos con una página la utilización de la propiedad border y sus variantes:

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="tituloprincipal">Propiedad border</h1>
<p class="comentarios">Debemos indicar el border-width border-style 
border-color</p>
</body>
</html>

Y la hoja de estilo definida para esta página es:

.tituloprincipal{
  border:5px solid #ff0000;
}
.comentarios{
  border-top:1px solid #ffff00;
  border-bottom:1px solid #ffff00;
}
border formato resumido

Definimos dos clases llamadas tituloprincipal y comentarios y se los aplicamos a los elementos h1 y p en la página HTML.


Retornar