Propiedad CSS column-rule-style

La propiedad column-rule-style especifica el estilo de la regla entre columnas. Una column-rule es similar a un borde que puedes agregar para separar columnas adyacentes. También puede tener estilos como un borde.

Esta propiedad es una de las propiedades CSS3.

Para usar esta propiedad, primero debes definir las columnas utilizando las propiedades columns o column-count.

La propiedad column-rule-style tiene los siguientes valores:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Valor inicial	none
Se aplica a	Elementos multicol.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.columnRuleStyle = "dashed" ;

Sintaxis

Sintaxis de la propiedad CSS column-rule-style

css

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Ejemplo de la propiedad column-rule-style:

Ejemplo de la propiedad CSS column-rule-style con valor dotted

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Column-rule-style property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Captura de pantalla de la propiedad column-rule-style

En el siguiente ejemplo, las reglas entre columnas son dobles. En este ejemplo, el color se especifica para la regla mediante la propiedad column-rule-color.

Ejemplo de la propiedad column-rule-style con el valor "double":

Ejemplo de la propiedad CSS column-rule-style con valor double

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 3;
        column-gap: 30px;
        column-rule-style: double;
        column-rule-color: #1c87c9;
        column-rule-width: 5px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Column-rule-style property example</h1>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
none	No se define ninguna regla. Este es el valor predeterminado.
hidden	La regla está oculta.
dotted	La regla es de puntos.
dashed	La regla es discontinua.
solid	La regla es sólida.
double	La regla es doble.
groove	La regla es un surco 3D. Los valores de ancho y color definen el efecto.
ridge	La regla es un relieve 3D. Los valores de ancho y color definen el efecto.
inset	La regla es un hundimiento 3D. Los valores de ancho y color definen el efecto.
outset	La regla es un resalte 3D. Los valores de ancho y color definen el efecto.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas sobre la propiedad CSS column-rule-style?

La propiedad column-rule-style se utiliza para especificar el estilo de la regla entre columnas.El valor predeterminado de la propiedad column-rule-style es 'none'.La propiedad column-rule-style no se puede usar con la regla @media.Los valores de column-rule-style pueden replicar cualquier estilo de borde.La propiedad column-rule-style solo es aplicable al elemento <div>.

Propiedad CSS column-rule-style ​

Sintaxis ​

Ejemplo de la propiedad column-rule-style: ​

Resultado ​

Ejemplo de la propiedad column-rule-style con el valor "double": ​

Valores ​