Blog
Guía rápida sobre los bordes en CSS
Autor: Andrés Cruz en Udemy | Comentarios: 0Con esta propiedad es posible definir el color, tamaño y estilo de cada uno de los 4 bordes que definen la caja de un elemento; veamos cada una de las propiedades que lo conforman:
border-width
Define la anchura que tendrá el borde; la anchura de los bordes se definen con las cuatro propiedades siguientes:
Cada uno de las propiedades pasadas se explica por sí sola; la anchura de los mismos se indica mediante alguna unidad de medida soportada por CSS.
Si se quiere establecer de forma simultánea la anchura de todos los bordes, podemos utilizar la siguiente propiedad:
En donde recibe de uno a cuatro valores:
border-width:4px 5px 6px 7px
- top border: borde superior 4px
- right border: borde derecho 5px
- bottom border: borde inferior 6px
- left border: borde izquierdo 7px
border-width:4px 5px 6px
- top border: borde superior 4px
- right y left border: borde derecho e izquierdo: 5px
- bottom border: borde inferior 6px
border-width:4px 5px
- top y bottom borders: borde superior e inferior: 4px
- right y left borders 5px: borde derecho e izquierdo: 5px
border-width:4px
- Todos los bordes: 4px
Border-style
Define el estilo de los bordes:
También es posible definirlos uno a uno (por cada lado del borde):
O todos con una sola propiedad:
Su funcionamiento es exactamente igual que el de border-width.
Border-color
Define el color; viene dado en RGB (#111111,#001122...) o el nombre del color en inglés (red, blue...):
#border-color1
{
border-color:#F00000;
}
También es posible definirlos uno a uno (por cada lado del borde):
Su funcionamiento es exactamente igual que el de border-width.
Ejemplos:
border-style y border-color:
#solid
{
border-color:#F00000;
border-style:solid;
}
#dashed
{
border-color:#F00000;
border-style:dashed;
}
#dotted
{
border-color:#F00000;
border-style:dotted;
}
#groove
{
border-color:#F00000;
border-style:groove;
}
#ridge
{
border-color:#F00000;
border-style:inset;
}
#outset
{
border-color:#F00000;
border-style:outset;
}
#double
{
border-color:#F00000;
border-style:double;
}
border-style, border-color y border-width:
También es posible definir todas las propiedades en una sola propiedad con border:
#border1
{
border:2px #F00000 solid;
}
#border2
{
border-width:2px;
border-color:#F00000;
border-style:solid;
}
Para ambos casos vemos el mismo resultado; lo único que varía es la cantidad de líneas para obtener el resultado.
Su Comentario:
Deje aquí su comentario acerca de este artículo...
Otros artículos del blog
¿Cómo crear una API REST con CodeIgniter?
¿Cómo redimensionar imágenes con CodeIgniter?
¿Qué documentos necesitas para solicitar la ayuda como emigrante retornado?
¿Qué es y para qué sirve un archivo robots.txt?
Adapta tu sitio web a la nueva normativa sobre cookies
Atributo download HTML5 para descargar archivos del servidor mediante enlaces
Botón redondeado con CSS
Bucle para recibir todas las variables por POST en PHP
Carga o upload de archivos con CodeIgniter
Columnas múltiples con CSS3
Como evitar la inyección SQL en PHP
Cómo optimizar la cabecera de una página web para SEO: guía avanzada y completa
Cómo optimizar la etiqueta de título para atraer más tráfico de Google
Como puedo abrir puertos en mi router para acceder remotamente a mi ordenador personal
Contador de caracteres con JQuery
Copias de seguridad avanzadas para bases de datos MySQL
Creando fácilmente imágenes de relleno para tus prototipos
Crear un sticky desplegable en la web
Detectar el sistema operativo, navegador y versión del cliente
Diseño y desarrollo web a la medida
Ejecutar script automáticamente con Cron en Linux
El elemento meter HTML5
El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos
El nuevo elemento <picture> de HTML5 para crear imágenes responsive
Elementos fundamentales para trabajar con Codeingniter
Envío de correos o emails con CodeIgniter, guía rápida
Función para extraer la extensión de un archivo con PHP
Guía rápida sobre el elemento br en HTML
Guía rápida sobre el elemento p en HTML
Guía rápida sobre los bordes en CSS
La etiqueta meta viewport en html5
La relación entre el contenido extenso y el convencimiento del usuario
Las fuentes de Google Font para nuestra web y efectos sobre nuestras fuentes
Lo bueno y lo malo del SEO
Los helpers en CodeIgniter para definir nuestras funciones
Mensaje aceptar cookies para cumplir con la Ley General de Protección de Datos (LGPD)
Meta tags de HTML
Múltiples bordes en un contenedor con CSS
Script para automatizar backups de MySQL en servidores Windows
Streams en PHP
Trucos y ejemplos de configuración del archivo htaccess de Apache
Uso de las páginas de error 404 como soporte estratégico de contenidos