La propiedad column-rule-width en CSS se usa para cambiar el ancho de la regla de la columna, es decir, las líneas verticales entre las columnas.
Sintaxis:
column-rule-width: length|thin|medium|thick|initial|inherit;
Valor por defecto:
- medio
Valores de propiedad:
- delgada: Se utiliza para establecer una regla delgada entre las columnas.
- medio: Se utiliza para crear una regla de ancho medio entre las columnas. Es el ancho predeterminado.
- grueso: Crea una regla de ancho grueso entre las columnas.
- longitud: Se utiliza para establecer el ancho por la longitud. No toma valor negativo.
- initial: se utiliza para establecer la propiedad column-rule-width en su valor predeterminado.
- heredar: esta propiedad se hereda de su padre.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
column-rule-width property
</title>
<!-- column-rule-width CSS property -->
<style>
.length {
column-count: 3;
column-rule: solid green;
column-gap:40px;
column-rule-width: 10px;
text-align:justify;
}
.thin {
column-count: 3;
column-rule: solid green;
column-gap:40px;
column-rule-width: thin;
text-align:justify;
}
.thick {
column-count: 3;
column-rule: solid green;
column-gap:40px;
column-rule-width: thick;
text-align:justify;
}
.medium {
column-count: 3;
column-rule: solid green;
column-gap:40px;
column-rule-width: medium;
text-align:justify;
}
.initial {
column-count: 3;
column-rule: solid green;
column-gap:40px;
column-rule-width: initial;
text-align:justify;
}
h2 {
text-align:center;
}
</style>
</head>
<body>
<!-- column-rule-width: length; property -->
<h2>column-rule-width: length;</h2>
<div class = "length">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: thin; property -->
<h2>column-rule-width: thin;</h2>
<div class = "thin">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: thick; property -->
<h2>column-rule-width: thick;</h2>
<div class = "thick">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: medium; property -->
<h2>column-rule-width: medium;</h2>
<div class = "medium">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: initial; property -->
<h2>column-rule-width: initial;</h2>
<div class = "initial">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad column-rule-width se enumeran a continuación:
- Google Chrome 50.0, 4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0, 2.0 -moz-
- Safari 9.0, 3.1 -webkit-
- Opera 37.0, 15.0 -webkit-, 11.1