Establecer color de borde CSS a color de texto

Question

¿Hay alguna manera de configurar el border-color en CSS para que sea el mismo que el color de texto?

Por ejemplo, tener una clase que agrega un borde punteado inferior, pero dejando el color de dicho borde para que coincida con el color del texto de la misma manera que el color text-decoration:underline es el color del texto (color propiedad) ?

Answer 1

En realidad, obtienes este comportamiento de forma gratuita; es mencionado en el spec:

Si el color del borde de un elemento no se especifica con una propiedad frontera, los agentes de usuario deben utilizar el valor de la propiedad 'color' del elemento que el valor calculado para el color del borde.

Así que todo lo que tiene que hacer es omitir el color cuando se utiliza el border propiedad resumida:

.dotted-underline { 
    border-bottom: dotted 1px; 
} 

O utilice únicamente los border-style y border-width propiedades, y no border-color:

.dotted-underline { 
    border-bottom-style: dotted; 
    border-bottom-width: 1px; 
} 

O bien, en browsers that support la nueva palabra clave CSS3 currentColor, especifique que como valor para border-color (u seful para anular border-color declaraciones existentes):

.dotted-underline { 
    border-bottom-color: currentColor; 
    border-bottom-style: dotted; 
    border-bottom-width: 1px; 
} 

El color que la frontera adquiere will be the same as the text color by default.

Answer 2

Deberá configurar estos colores para que sean del mismo color.

Si quiere que su CSS sea más programático y SECO, debería usar algo como LESS. Puede ahorrarte mucho trabajo, por lo que solo debes declarar ese color una vez.

Answer 3

Este:

border-bottom: 1px dotted currentColor; 

De la especificación:

currentcolor El valor de la propiedad ‘color’. El valor calculado de la palabra clave 'currentColor' es el valor calculado de la propiedad 'color'. Si la palabra clave 'currentColor' se establece en la propiedad 'color' en sí, se trata como 'color: inherit'.

Ver aquí: http://www.w3.org/TR/css3-color/#currentcolor

(no funciona en IE8 aunque)

---

Actualización: Por lo tanto, parece que establecer explícitamente el valor del color no es necesario, ya que la el valor predeterminado ya es es el valor de la propiedad color.

Por lo tanto, esto funciona muy bien:

border-bottom: 1px solid;