Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Border CSS - Bordes CSS - Virtualnauta.com - Tutorial CSS

Bordes CSS

Usa color, estilo y espesor en los bordes de todos los elementos.


Bordes con CSS

Los bordes nos sirven para decorar todos los elementos con líneas de diferentes espesores, colores y formas.

Esta propiedad se aplica al área de bordes de la caja.

Modelo de cajas

La propiedad de los bordes

La propiedad border especifica el espesor, color y estilo de los bordes.
Es la forma abreviada para definir los bordes y puede comprender en ella todas las propiedades de los bordes juntas.

Sintaxis

selector {border: valor-1 valor-2 valor-n}

Nota: debemos dejar un espacio en blanco entre los valores

Los posibles valores para definir los espesores de los bordes

thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | nombre del color(inglés) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Ejemplo

Vamos a decorar los bordes de una tabla.

Código
<head>
<style type="text/css">
table{border: blue double medium}
td{border: green dotted medium}
</style>
</head>

<body>
<table>
<tr>
<td>Esta tabla</td>
<td>tiene los bordes</td>
</tr>
<tr>
<td>decorados con</td>
<td>diferentes propiedades</td>
</tr>
</table>
</body>
Resultado
Esta tabla tiene los bordes
decorados con diferentes propiedades
Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style

Espesor de los bordes

La propiedad border-width especifica el espesor del borde

Sintaxis

Establecer el mismo espesor para todos los bordes del selector.

selector {border-width: valor}

Establecer el espesor de cada borde del selector por separado.

selector {
border-top-width: valor;
border-right-width: valor;
border-bottom-width: valor;
border-left-width: valor;
}

Nota: no olvides poner (;) al final de cada línea

Los posibles valores para definir los espesores de los bordes

thin fino | medium medio | thick grueso | tamaño (px, pc, pt, mm, cm, in)

Ejemplo

Vamos a aplicar un espesor a un borde sobre un texto.

Código
<head>
<style type="text/css">
p { border-width: 5px;
border-style: solid; }
</style>
</head>

<body>
<p>Texto con un borde de 5 pixels</p>
</body>
Resultado

Texto con un borde de 5 pixels

Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style

Color de los bordes

La propiedad border-color especifica el color del borde

Sintaxis

Establecer el color de todos los bordes a la ves.

selector {border-color: valor}

Establecer el color de cada borde por separado.

selector {
border-top-color: valor;
border-right-color: valor;
border-bottom-color: valor;
border-left-color: valor;
}

Los posibles valores para colorear los bordes

nombre del color(inglés) | #xxxxxx | transparent

Ejemplo

Vamos a aplicar un color a un borde sobre un título.

Código
<head>
<style type="text/css">
h2{
border-color: red;
border-style: solid;
}
</style>
</head>

<body>
<h2>Título con un borde rojo</h2>
</body>
Resultado

Título con un borde rojo

Nota: para poder visualizar el borde debemos usar la propiedad border-style

Estilo de los bordes

La propiedad border-style especifica el estilo del borde

Sintaxis

Establecer el estilo de todos los bordes a la ves.

selector {border-style: valor}

Establecer el estylo de cada borde por separado.

selector {
border-top-style: valor;
border-right-style: valor;
border-bottom-style: valor;
border-left-style: valor;
}

Los posibles valores para dar estilo a los bordes

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Ejemplo

Vamos a aplicar un estilo a cada uno de los bordes de una lista.

Código
<head>
<style type="text/css">
h3{
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: groove;
}
</style>
</head>

<body>
<h3>Diferentes estilos de bordes</h3>
</body>
Resultado

Diferentes estilos de bordes


Tabla de las propiedades de los bordes

PropiedadDescripciónValoresDetallesEj.
border Define ancho, color y estilo general para los 4 bordes.

border-top: define ancho, color y estilo para el borde superior

border-right: define ancho, color y estilo para el borde derecho

border-bottom: define ancho, color y estilo para el borde inferior

border-left: define ancho, color y estilo para el borde izquierdo
thin Fino Ejemplo de bordes con diferetes espesores
medium Mediano
thick Grueso
longitud Longitud
color Color Ejemplo de bordes de diferetes colores
transparent Transparente Ejemplo de un bordes transparente
none Nada Ejemplo de un texto sin bordes
hidden Oculto Ejemplo de bordes ocultos
dotted Punteado Ejemplo de bordes punteados
dashed Línea de rayas Ejemplo de borde a rayas
solid Solido Ejemplo de un borde solido
double Doble Ejemplo
groove Acanalado Ejemplo de bordes acanalados
ridge En relieve Ejemplo de bordes en relieve
inset Recuadro Ejemplo de bordes en recuadro
outset Resalte Ejemplo de bordes resaltados
border-width Ancho general de los 4 bordes.

border-top-width: ancho del borde superior.

border-right-width: ancho del borde derecho.

border-bottom-width: ancho del borde inferior.

border-left-width: ancho del borde izquierdo.
thin Fino Ejemplo de bordes con diferetes espesores
medium Mediano
thick Grueso
longitud Longitud
border-color Color general de los 4 bordes.

border-top-color:color del borde superior

border-right-color:color del borde derecho

border-bottom-color:color del borde inferior

border-left-color:color del borde izquierdo
color Color Ejemplo de bordes de diferetes colores
transparent Transparente Ejemplo de un bordes transparente
border-style Estilo general de los 4 bordes.

border-top-style:estilo del borde superior

border-right-style:estilo del borde derecho

border-bottom-style:estilo del borde inferior

border-left-style:estilo del borde izquierdo
none Nada Ejemplo de un texto sin bordes
hidden Oculto Ejemplo de bordes ocultos
dotted Punteado Ejemplo de bordes punteados
dashed Línea de rayas Ejemplo de bordes rayados
solid Solido Ejemplo de bordes solidos
double Doble Ejemplo de bordes dobles
groove Acanalado Ejemplo de bordes acanalados
ridge En relieve Ejemplo de bordes en relieve
inset Recuadro Ejemplo de bordes en recuadro
outset Resalte Ejemplo de bordes resaltados


<<< Relleno - Padding en CSS Margen - Margin en CSS >>>

En la Web