La propiedad column-rule-color de CSS se usa para cambiar el color de la regla entre las columnas.
Sintaxis:
column-rule-color: color | initial | inherit
Valores de propiedad:
- color: se utiliza para establecer el color de la regla en cualquier color CSS válido.
- initial: Se utiliza para establecer el color por defecto de la regla.
- heredar: en este el color se heredará de su elemento padre.
Ejemplo :
<!DOCTYPE html>
<html>
<head>
<title> CSS property | column-rule-color </title>
<!-- column-rule-color CSS property -->
<style>
p.one{
column-gap: 50px;
column-count: 3;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: green;
border: 1px solid black;
text-align: center;
}
p.two{
column-gap: 50px;
column-count: 3;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: #000080;
border: 1px solid black;
text-align: center;
}
p.three{
column-gap: 50px;
column-count: 3;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: rgb(0, 191, 255);
border: 1px solid black;
text-align: center;
}
p.four{
column-gap: 50px;
column-count: 3;
column-rule-style: solid;
column-rule-width: 10px;
column-rule-color: initial;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<!-- column-rule-color: green; property -->
<p class="one">
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.
</p>
<!-- column-rule-color: #000080; property -->
<p class="two">
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.
</p>
<!-- column-rule-color: rgb(0, 191, 255); property -->
<p class="three">
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.
</p>
<!-- column-rule-color: initial; property -->
<p class="four">
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.
</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad column-rule-color se enumeran a continuación;
- Google Chrome: 50.0, 4.0 -webkit-
- Explorador de Internet: 10.0
- Firefox: 52.0, 2.0 -moz-
- Opera: 37.0, 15.0 -webkit-, 11.1
- Safari: 9.0, 3.1 -webkit-
Referencia: Red de desarrolladores de Mozilla (MDN)
Comente a continuación, si encontró algún error o si tiene sugerencias para mejorar.