Horario de cursos

Tutoriales avanzados de CSS

• Libro de texto CSS
• Introducción a CSS
• Gramática básica de CSS
• Gramática avanzada de CSS
• Selector de derivación CSS
• Selector id CSS
• Selector de clase CSS
• Creación de CSS
• Fondo CSS
• Texto CSS
• Fuente CSS
• Lista CSS

Modelo de cuadro de CSS

• Resumen del modelo de cuadro CSS
• Márgen interna CSS
• Borde CSS
• Márgen externa CSS
• Fusión de márgenes externos CSS

Posicionamiento de CSS

• Resumen de posicionamiento CSS
• Posicionamiento relativo CSS
• Posicionamiento absoluto CSS
• Flotamiento CSS

Selector de CSS

• Selector de elemento CSS
• Grupo de selectores CSS
• Detalles del selector de clase CSS
• Detalles del selector id CSS
• Detalles del selector de atributo CSS
• Selector de descendiente CSS
• Selector de elemento hijo CSS
• Selector de hermano adyacente CSS

Cursos optativos

Recomendación de curso:

• Caja de herramientas CodeW3C.com

El borde del elemento (border) es una línea o líneas alrededor del contenido del elemento y el margen interno.

El atributo border de CSS permite especificar el estilo, anchura y color del borde del elemento.

Borde CSS

En HTML, usamos tablas para crear bordes alrededor del texto, pero mediante la utilización de las propiedades de borde de CSS, podemos crear bordes excelentes y aplicárselos a cualquier elemento.

El borde del elemento (border) está dentro del margen externo del elemento y es una línea o líneas alrededor del contenido del elemento y el margen interno.

Cada borde tiene tres aspectos: anchura, estilo y color. A continuación, le explicaremos estos tres aspectos en detalle.

Borde y fondo

La especificación de CSS indica que el borde se dibuja 'sobre el fondo del elemento'. Esto es importante porque algunos bordes son 'intermitentes' (por ejemplo, el borde punteado o el borde discontinuo), y el fondo del elemento debe aparecer entre las partes visibles del borde.

CSS2 indica que el fondo se extiende solo hasta el margen interno, no hasta el borde. Luego, CSS2.1 corrigió esto: el fondo del elemento es el fondo del contenido, el margen interno y la zona del borde. La mayoría de los navegadores siguen la definición de CSS2.1, aunque algunos navegadores más antiguos pueden tener un comportamiento diferente.

Estilo del borde

Es uno de los aspectos más importantes del borde, no porque el estilo controle la visualización del borde (por supuesto, el estilo realmente controla la visualización del borde), sino porque sin estilo, no habría borde.

El estilo de CSS Atributo border-styleSe definen 10 estilos diferentes no heredados, incluyendo 'none'.

Por ejemplo, puede definir el borde de una imagen para que sea 'saliente', haciendo que se vea como un 'botón emergente':

a:link img {border-style: outset;}

Definir varios estilos

Puede definir múltiples estilos para un borde, por ejemplo:

p.aside {border-style: solid dotted dashed double;}

La regla superior define cuatro estilos de borde para los párrafos con el nombre de clase 'aside': borde superior sólido, borde derecho punteado, borde inferior discontinuo y borde izquierdo doble.

Vemos aquí otra vez que el valor adopta el orden de top-right-bottom-left, y también hemos visto este orden al discutir la configuración de múltiples valores para diferentes márgenes internos.

Definir estilo de lado

Si desea establecer el estilo del borde de un lado del cuadro de elemento en lugar de establecer el estilo del borde de todos los cuatro lados, puede usar las propiedades de borde de lado único a continuación:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Por lo tanto, estos dos métodos son equivalentes:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Nota:Si desea usar el segundo método, debe colocar el atributo de un lado después del atributo abreviado. Porque si coloca el atributo de un lado antes de border-style, el valor del atributo abreviado cubrirá el valor del atributo de un lado none.

Ancho del borde

Puede establecer Atributo border-widthEspecificar el ancho del borde.

Hay dos métodos para especificar el ancho del borde: puede especificar un valor de longitud, como 2px o 0.1em; o usar una de las 3 palabras clave, que son thin, medium (por defecto) y thick.

Nota:CSS no define el ancho específico de 3 palabras clave, por lo que un agente de usuario puede establecer thin, medium (por defecto) y thick en 5px, 3px y 2px, mientras que otro agente de usuario los establece en 3px, 2px y 1px.

Por lo tanto, podemos establecer el ancho del borde de esta manera:

p {border-style: solid; border-width: 5px;}

o:

p {border-style: solid; border-width: thick;}

Definir el ancho de un lado

Puede establecer el borde de cada lado del elemento en el orden de top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

El ejemplo anterior también se puede abreviar de la siguiente manera (este tipo de escritura se llamaValor de copia）：

p {border-style: solid; border-width: 15px 5px;}

También puede establecer el ancho de cada lado del borde mediante las siguientes propiedades:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Por lo tanto, las siguientes reglas son equivalentes a los ejemplos anteriores:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Sin borde

En los ejemplos anteriores, ya ha visto que para mostrar algún tipo de borde, es necesario establecer el estilo de borde, como solid o outset.

Entonces, ¿qué ocurre si se establece border-style en none?

p {border-style: none; border-width: 50px;}

A pesar de que el ancho del borde es de 50px, el estilo del borde se establece en none. En este caso, no solo se pierde el estilo del borde, sino que también su anchura se convierte en 0. El borde desaparece, ¿por qué?

Esto se debe a que si el estilo del borde es none, es decir, el borde no existe, el borde no puede tener anchura, por lo tanto, el ancho del borde se establece automáticamente en 0, sin importar lo que definiste anteriormente.

Es muy importante recordar esto. De hecho, olvidar declarar el estilo del borde es un error común. Según las siguientes reglas, todos los elementos h1 no tendrán ningún borde, ni que decir de 20 píxeles de ancho:

h1 {border-width: 20px;}

Dado que el valor predeterminado de border-style es none, si no se declara un estilo, es equivalente a border-style: none.Por lo tanto, si desea que el borde aparezca, debe declarar un estilo de borde.

Color del borde

Establecer el color del borde es muy simple. CSS utiliza un Atributo border-color，que puede aceptar hasta 4 valores de color por vez.

Se puede usar cualquier tipo de valor de color, por ejemplo, puede ser un color nombrado, también puede ser un valor hexadecimal y RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Si el valor del color es menor de 4, se aplica la función de copia del valor. Por ejemplo, la declaración de regla siguiente especifica que los bordes superior e inferior del párrafo son azules, y los bordes izquierdo y derecho son rojos:

p {
  border-style: solid;
  border-color: blue red;
  }

Nota:El color predeterminado del borde es el color de primer plano del elemento. Si no se declara un color para el borde, será el mismo que el color del texto del elemento. Por otro lado, si el elemento no tiene ningún texto, supongamos que es una tabla que solo contiene imágenes, entonces el color del borde de esta tabla es el color de texto del elemento padre (porque color se puede heredar). Este elemento padre es probablemente body, div o otro table.

Definir color de un solo lado

También hay propiedades de color de borde de un solo lado. Su principio es el mismo que el de los estilos y atributos de anchura de un solo lado:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Para especificar un borde negro en línea recta para el elemento h1 y un borde derecho en línea recta roja, puede especificarlo de la siguiente manera:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Borde transparente

Hemos hablado recientemente de que si el borde no tiene estilo, no tiene anchura. Sin embargo, en algunas situaciones, es posible que desee crear un borde invisible.

CSS2 introdujo el valor de color de borde transparente. Este valor se utiliza para crear un borde invisible de ancho. Vea el siguiente ejemplo:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Definimos los siguientes estilos para los enlaces anteriores:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Intente usted mismo

En cierta medida, el uso de transparente hace que el borde sea como un margen adicional; además, tiene la ventaja de poderlo hacer visible cuando lo necesite. Este borde transparente es equivalente a un margen, ya que el fondo del elemento se extiende hasta la área del borde (si hay un fondo visible).

Importante:Antes de IE7, IE/WIN no proporcionaba soporte para transparente. En versiones anteriores, IE establecería el color del borde según el valor del color del elemento.

Atributos de borde de CSS

Caixa de ferramentas

Manual de referencia de CSS

Ejemplos de CSS

Pruebas de CSS

Tutorial de CSS

Enlaces de patrocinadores