CSS: propiedad inferior del borde

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad inferior del borde

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada borde inferior Con sintaxis y ejemplos.

describir

La propiedad border-bottom de CSS define el ancho, el estilo de línea y el color del borde inferior del cuadro. Es una propiedad abreviada para configurar las propiedades CSS border-bottom-width, border-bottom-style y border-bottom-color.

sintaxis

La sintaxis de la propiedad CSS del borde inferior es:

border-bottom: border-bottom-width border-bottom-style border-bottom-color;

parámetro o parámetro

border-bottom-width es el ancho del borde inferior del cuadro, que puede ser uno de los siguientes:
(Si no se proporciona el ancho inferior del borde, el valor predeterminado es medio)

valor describir
estable valor fijo en px, em, …
div { borde inferior: 2px; }
finamente Ancho inferior del borde delgado, puede ser 1px o 2px dependiendo del navegador
div {borde inferior: delgado;}
Moderar Ancho inferior del borde medio, puede ser de 3px o 4px dependiendo del navegador
div { borde inferior: medio; }
Grueso Ancho inferior del borde grueso, puede ser 5px o 6px dependiendo del navegador
div {borde inferior: grueso;}

border-bottom-style es el estilo de línea para el borde inferior del cuadro, que puede ser uno de los siguientes:
(el valor predeterminado es ninguno si no se proporciona el estilo de borde inferior)

valor describir
no cualquiera parte inferior sin bordes (este es el valor predeterminado)
div { borde inferior: ninguno; }
duro simple, recto, sólido
div { borde inferior: sólido; }
embellecido serie de puntos
div {borde inferior: punteado;}
linea punteada Serie de guiones
div { borde inferior: discontinuo; }
doble Las dos líneas suman la cantidad de píxeles definidos por border-bottom-width
div { borde inferior: doble; }
ranura efecto de grabado
div { borde inferior: surco; }
cresta La parte inferior del bisel se ve como un aspecto 3D “fuera” (frente a la ranura)
div {borde inferior: cresta;}
ilustración Apariencia incrustada
div { borde inferior: inserción; }
al principio Apariencia en relieve (a diferencia de la ilustración)
div { borde inferior: inicio; }
oculto el borde está oculto
div { borde inferior: oculto; }
heredar El elemento heredará el estilo de la parte inferior del borde de su elemento principal
div { borde inferior: heredar; }

border-bottom-color es el color del borde inferior del cuadro, que puede ser uno de los siguientes:

valor describir
#RRGGBB representación hexadecimal del color base del borde
div { borde inferior: #FF0000; }
RGB() Representación RGB del color de fondo del borde
div {borde inferior: rgb(255, 0, 0); }
nombre El nombre del color de fondo del borde (es decir, rojo, azul, negro, blanco)
div { borde inferior: rojo; }
transparente No muestre los bordes pero aún así ocupe espacio en la página
div { borde inferior: transparente; }
heredar El elemento heredará el color inferior del borde de su elemento principal
div { borde inferior: heredar; }

notas

  • Al usar la propiedad border-bottom, puede proporcionar uno o todos los valores (valores border-bottom-width, border-bottom-style y border-bottom-width), y puede proporcionarlos en cualquier orden.
  • Debe proporcionar un valor para el estilo de borde inferior para mostrar el borde inferior.
  • Consulte también las propiedades border-bottom-color, border-bottom-style y border-bottom-width.
  • ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.

Compatibilidad del navegador

La propiedad CSS border-bottom tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Navegador de Internet (IE)
  • es decir, móvil
  • ópera
  • Ópera Móvil
  • Safari (WebKit)
  • Safari para móvil

ejemplo

Discutiremos la propiedad border-bottom a continuación, explorando ejemplos de cómo usarla en CSS.

Por ejemplo:

div { border-bottom: solid; }

En este ejemplo de la parte inferior del borde de CSS, vamos a

El estilo de línea del borde inferior de la etiqueta se establece en sólido. Tienes que establecer el estilo o el borde inferior no aparecerá.

A continuación, veremos un ejemplo de borde inferior de CSS en el que proporcionamos valores de ancho de borde inferior, estilo de borde inferior y color de borde inferior.

div { border-bottom: 2px solid black; }

En este ejemplo de la parte inferior del borde de CSS, configuramos el ancho de la parte inferior del borde en 2 px, el estilo de la parte inferior del borde en un color sólido y el color de la parte inferior del borde en negro.

Podemos reescribir este ejemplo usando valores hexadecimales negros de la siguiente manera:

div { border-bottom: 2px solid #000000; }

O podríamos reescribir este ejemplo con valores rgb() negros de la siguiente manera:

div { border-bottom: 2px solid rgb(0,0,0); }
(Visited 10 times, 1 visits today)