CSS Bordes

Bordes con CSS

Los bordes nos sirven para decorar algunos elementos con líneas de diferentes espesores, colores y formas.
Un ejemplo de bordes, podría ser esta tabla a la cual le aplicamos diferentes propiedades para hacerla más atractiva

Código


<html>
<head>
 <style type="text/css">
  table{border:blue double}
  td{border:green dotted thin}
 </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>
</html>

Resultado

Esta tabla	tiene los bordes
decorados con	diferentes propiedades

Tabla de las propiedades de los bordes

Propiedad	Descripción	Valores	Detalles
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
		medium	Mediano
		thick	Grueso
		longitud	Longitud
		color	Color
		transparent	Transparente
		none	Nada
		hidden	Oculto
		dotted	Punteado
		dashed	Línea de rayas
		solid	Solido
		double	Doble
		groove	Sombreado
		ridge	En relieve
		inset	Inserción
		outset	Resalte
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
		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
border-color		transparent	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
		hidden	Oculto
		dotted	Punteado
		dashed	Línea de rayas
		solid	Solido
		double	Doble
		groove	Sombreado
		ridge	En relieve
		inset	Inserción
		outset	Resalte