СВОЙСТВО COLUMN-RULE-STYLE
Свойство column-rule-style указывает стиль линии между столбцами.
Поддержка браузеров
| 10+ | ||||
Синтаксис
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit
Значения свойства
| Значение | Описание |
|---|---|
| none | Стиль отсутствует. Это значение по умолчанию. |
| hidden | Устанавливает невидимую линию. |
| dotted | Определяет точечную линию. |
| dashed | Определяет пунктирную линию. |
| solid | Определяет сплошную линию. |
| double | Определяет двойную линию. |
| groove | Определяет вдавленную резную линию. |
| ridge | Определяет выступающую линию. |
| inset | Определяет линию, которая создает эффект встроенности. |
| outset | Определяет линию, которая создает эффект рельефа. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Унаследует значение свойства от родительского элемента. |
Песочница
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt magna in nisl aliquam ornare ut rhoncus diam. Integer at sapien pharetra, luctus urna vel, volutpat nisi. Donec vulputate sodales semper. Etiam finibus mauris eu sem egestas dignissim vitae et ligula. Praesent in arcu aliquet, fringilla mi et, semper lorem. Curabitur vitae lorem ut magna venenatis suscipit vel et turpis. Nullam vel scelerisque mi, nec elementum mi. Integer ultricies, turpis in pharetra tempor, mauris erat egestas mauris, sit amet pretium sapien est porttitor turpis. Nullam turpis sapien, blandit eget mattis a, tincidunt at sapien. Quisque finibus molestie sapien. Aenean quis risus tortor. Aliquam lorem tortor, efficitur nec volutpat sit amet, viverra quis nisl. Pellentesque malesuada vitae orci in viverra. Mauris consectetur dictum blandit.
</div>
HTML
.block {
column-count: 3;
column-fill: auto;
column-rule-style: dotted;
column-rule-width: 3px;
column-rule-color: orange
}
CSS