Los bordes y contornos CSS son herramientas valiosas para los diseñadores web que buscan agregar estilo a un sitio. Son fáciles de usar una vez que sabe cómo funcionan y son lo suficientemente versátiles para satisfacer una amplia gama de necesidades. Veamos los bordes de CSS para ver dónde debe comenzar.
¿Cuál es la diferencia entre un borde y un contorno en CSS?
Los contornos y bordes CSS forman dos de las capas exteriores de el modelo de caja CSS, sentado entre fronteras y márgenes. Si bien estas propiedades son similares, tienen diferentes valores y propósitos.
Por un lado, los contornos de CSS se encuentran fuera de los bordes. Esto significa que pueden superponerse con contenido fuera del elemento al que los aplica. Junto con esto, los bordes CSS cambian las dimensiones de un elemento pero los contornos no.
Si tiene dificultades para visualizar los estilos de borde y contorno, puede usar su herramientas de desarrollo del navegador para depurar a ellos.
Valores de propiedad compartida de borde y contorno CSS
A pesar de sus diferencias, los bordes y contornos de CSS comparten algunos de sus valores. La abreviatura que usas para cada uno también es muy similar.
Taquigrafía de borde y contorno CSS
Al igual que otras propiedades CSS complejas, tanto los bordes como los contornos tienen taquigrafía disponible. Ambas propiedades comparten el mismo formato para sus opciones abreviadas y se ven así.
borde: anchoestilocolor;
describir: anchoestilocolor;Esto crea reglas que se ven así cuando están en acción. Por supuesto, sin embargo, esta abreviatura no cubre todos los valores disponibles para estas propiedades.
borde: 10px azul sólido;
contorno: 20px rojo sólido;Estas reglas abreviadas de CSS para bordes y contornos dan como resultado un borde azul fino con un contorno rojo grueso.
Al igual que otras propiedades abreviadas de CSS, también puede usar propiedades individuales para lograr los mismos resultados.
CSS ancho de borde y ancho de contorno
Los anchos de borde y contorno son valores de propiedad CSS opcionales que establecen el grosor de los bordes y contornos que utiliza. El formato para estas propiedades es el mismo.
ancho de contorno: 20px;
ancho del borde: 10px;Los bordes permiten establecer anchos individuales para cada lado del elemento, pero los contornos no. Puede leer más sobre esto en las siguientes secciones.
Estilo de borde y estilo de contorno CSS
Los bordes y contornos CSS vienen en una variedad de estilos. Los bordes sólidos son los más comunes, pero puede ser creativo con la forma en que usa los bordes y los contornos.
estilo de borde: sólido;
estilo de esquema: punteado;Puede encontrar una lista completa de los diferentes estilos de borde y contorno CSS al final de este artículo.
CSS color de borde y color de contorno
Al igual que con otras propiedades de CSS basadas en colores, los bordes y los contornos aceptan todos los colores legales de CSS. Esto incluye códigos hexadecimales, códigos RGB, colores abreviados y más.
borde-color: azul;
contorno-color: #ff0000;También puede usar degradados de color cuando trabaje con bordes y contornos CSS.
Valores de propiedad de borde CSS
Junto con sus valores de propiedad compartidos, los bordes y los contornos también tienen valores únicos para explorar. Los bordes CSS tienen dos propiedades únicas que vale la pena aprender.
CSS border-radius
Agregar un radio al borde de un elemento le brinda mucho control sobre su forma. Cada esquina de un elemento puede tener un radio diferente, y esta propiedad se puede establecer incluso cuando el estilo de borde se establece en ninguno.
borde-radio: 20px;Puede establecer un valor único para cambiar el radio de todas las esquinas.
También puede dividir las esquinas en grupos de arriba a la izquierda/abajo a la derecha y arriba a la derecha/abajo a la izquierda.
borde-radio: 10px 20px;Esto facilita la creación de formas interesantes con sus elementos HTML.
Finalmente, puede configurar cada esquina para que tenga su propio radio.
borde-radio: 10px 20px 30px 40px;Estos valores se aplican en el sentido de las agujas del reloj a partir de la esquina superior izquierda.
Propiedades del lado del borde CSS
A diferencia de los contornos, puede configurar cada lado de un borde para que tenga un valor único para muchas de sus propiedades. Esto hace posible dar a cada lado de su elemento un ancho diferente.
borde-izquierdo-ancho: 10px;
borde-derecho-ancho: 20px;
borde-superior-ancho: 30px;
borde-inferior-ancho: 40px;También puede establecer estilos de borde CSS independientes para cada lado de un elemento.
estilo de borde izquierdo: sólido;
borde-derecho-estilo: punteado;
borde-superior-estilo: discontinuo;
estilo de borde inferior: doble;Y puedes cambiar el color de cada lado si quieres.
estilo de borde izquierdo: azul;
borde-derecho-estilo: #ff0000;
borde-superior-estilo: #00ff00;
estilo de borde inferior: rgb (0, 0, 255);Los lados del borde CSS funcionan con la taquigrafía regular para combinarse así.
borde izquierdo: 10px azul sólido;
borde derecho: 20px punteado #00ff00;
borde superior: 30px punteado #ff0000;
borde inferior: 40píxeles dobleRGB(0, 0, 255);Valores de propiedad del esquema CSS
Al igual que los bordes CSS, los contornos tienen una propiedad única propia; contorno-desplazamiento.
Desplazamiento de contorno CSS
Agregar un desplazamiento a un contorno crea un espacio entre él y el elemento principal. Este desplazamiento debe ser el mismo para cada lado del contorno y la propiedad solo acepta un valor.
contorno-desplazamiento: 10px;Esta puede ser una buena manera de utilizar un tercer borde para sus elementos que coincida con el color de fondo.
Estilos de borde y contorno CSS
Tanto los bordes como los contornos necesitan un estilo para funcionar. Hay diez estilos disponibles para elegir, incluidos los bordes que no se muestran en absoluto.
estilo de borde: sólido;
estilo de borde: punteado;
estilo de borde: discontinuo;
estilo de borde: ranura;
estilo de borde: cresta;
estilo de borde: doble;
estilo de borde: inserción;
estilo de borde: inicio;
estilo de borde: oculto;
estilo de borde: ninguno;Los bordes comparten los mismos estilos que los contornos, solo que con el estilo de contorno establecido como propiedad.
Cómo usar bordes y contornos CSS
Los contornos y los bordes son excelentes herramientas de diseño para los creadores de sitios web. Puede definir la apariencia de su sitio web con estas propiedades CSS, pero deberá ser creativo.