`rule-style` CSS property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Want more browser support for this feature? Tell us why.

Learn more
See full compatibility

The rule-style CSS property defines the line style of the lines drawn between columns and rows in multi-column grid, flex, and multi-col layouts.

Try it

rule-style: solid;

rule-style: dashed, dotted;

rule-style: repeat(2, inset, dashed, double);

rule-style: solid, repeat(auto, double), solid;

rule-style: hidden;

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
    <i>M</i>
    <i>N</i>
    <i>O</i>
    <i>P</i>
    <i>Q</i>
    <i>R</i>
    <i>S</i>
    <i>T</i>
    <i>U</i>
    <i>V</i>
    <i>W</i>
    <i>X</i>
    <i>Y</i>
    <i>Z</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  rule: solid rebeccapurple 7px;
  gap: 7px;
}
#example-element i {
  padding: 5px;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

/* One value */
rule-style: none;
rule-style: hidden;
rule-style: dotted;
rule-style: dashed;
rule-style: solid;
rule-style: double;
rule-style: groove;
rule-style: ridge;
rule-style: inset;
rule-style: outset;

/* Multiple values */
rule-style: groove, double, dashed;
rule-style: solid, repeat(5, ridge), solid;
rule-style: dotted, repeat(auto, inset, outset), dotted;

/* Global values */
rule-style: inherit;
rule-style: initial;
rule-style: revert;
rule-style: revert-layer;
rule-style: unset;

Values

The rule-style property accepts a comma-separated list of values, including:

<line-style>: A <line-style>: one of none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. The default value is none.
<repeat-line-style>: A repeat() function, with the first argument being an <integer> of 1 or more, and subsequent arguments being <line-style> values. The integer specifies how many times the <line-style> values should be repeated.
<auto-repeat-line-style>: A repeat() function, with auto as the first argument and one or more <line-style> values as subsequent arguments. The provided <line-style> values are repeated as many times as needed to fill in values for any rules that are not explicitly specified by other components of the property value.

The rule-style property defines the line style of any column and row rule lines drawn in the gaps between columns and rows in multi-column, flex, and grid containers with more than one column or row.

The rule-style sets both the column-rule-style and row-rule-style properties to the same value. The rule-style, along with the rule-color and rule-width properties, can also be set using the rule shorthand.

The value is a comma-separated list of components, which can include <line-style>, <repeat-line-style>, and <auto-repeat-line-style> types.

If the property value has only one <line-style>, all the column and row rules will be that style. If we declare the following, all column and row rules will be double:

css

rule-style: double;

When more than one <line-style> is declared, they will be applied to rules in the order specified. If there are more rules than <line-style> values, the list of line styles is repeated until every column and row rule has a style. For example, if we declare the following, every odd rule will be double, and every even rule will be inset.

css

rule-style: double, inset;

Repeated line styles

The repeat() function, with an integer of 1 or greater as the first argument, can be used to repeat a valid list of CSS <line-style> values passed as subsequent arguments the specified number of times. This allows the same style to be repeated a set number of times without repeating the same value. You can include <line-style> keyword values or custom properties that resolve to a valid <line-style>. Using repeat() can make values easier to write, enabling recurring patterns to be written using a single function, regardless of the number of columns or rows. The following declarations are equivalent:

css

rule-style: solid, outset, inset, outset, inset, outset, inset;
rule-style: solid, repeat(3, outset, inset);

This creates a list of seven styles. If the number of styles in the rule-style value's style list exceeds the number of gaps between columns or rows, the excess style values are ignored. If the container has three columns or rows, the rule in the first gutter will be solid and the second outset.

If there are more gutters than styles, the list of styles is repeated. If the container has 8, 15, 22, or 29 columns or rows, this sequence of styles will be repeated one, two, three, or four times, respectively, with the last rule being inset.

Auto-repeating line styles

The repeat() function also accepts auto as the first argument instead of a positive integer. With auto as the first argument, the <line-style> values passed as subsequent parameters will be repeated as many times as needed to fill in values for any rules that are not explicitly specified by other components of the property value.

The auto keyword within the repeat() function creates an auto repeater that fills in values for column and row rules that would not otherwise receive values from other parts of the list, preventing the list from being cycled. Only one repeat(auto, <line-style>) is allowed within a rule-style value.

css

rule-style: solid, repeat(auto, dotted), solid;

In this case, it doesn't matter if the container has 8, 15, 22, or 29 columns or rows; the first and last rules will always be solid, and all the other rules will be dotted. If there are only 2 or 3 columns and rows, there will be no dotted rules.

Formal definition

Value not found in DB!

Formal syntax

rule-style = 
  <'column-rule-style'>  

<column-rule-style> = 
  <line-style-list>       |
  <auto-line-style-list>  

<line-style-list> = 
  <line-style-or-repeat>#  

<auto-line-style-list> = 
  <line-style-or-repeat>#? , <auto-repeat-line-style> , <line-style-or-repeat>#?  

<line-style-or-repeat> = 
  <line-style>         |
  <repeat-line-style>  

<auto-repeat-line-style> = 
  repeat( auto , [ <line-style> ]# )  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

<repeat-line-style> = 
  repeat( [ <integer [1,∞]> ] , [ <line-style> ]# )  

<integer> = 
  <number-token>

Examples

Basic usage

In this example, we define a single <line-style> for the lines drawn between the columns and rows of items in a grid container.

HTML

We create a list of 75 items. Most of the HTML is hidden for brevity.

html

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>74</li>
  <li>75</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li>52</li>
  <li>53</li>
  <li>54</li>
  <li>55</li>
  <li>56</li>
  <li>57</li>
  <li>58</li>
  <li>59</li>
  <li>60</li>
  <li>61</li>
  <li>62</li>
  <li>63</li>
  <li>64</li>
  <li>65</li>
  <li>66</li>
  <li>67</li>
  <li>68</li>
  <li>69</li>
  <li>70</li>
  <li>71</li>
  <li>72</li>
  <li>73</li>
  <li>74</li>
  <li>75</li>
</ul>

CSS

We define the unordered list to be a 10-column container, creating columns and rows with the grid-template-columns and rows property and remove the bullets with list-style-type set to none. We include a gap of 5px to provide enough room between the columns and rows to fit our thick dashed orange rule.

css

ul {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  list-style-type: none;
  gap: 5px;
  rule-width: thick;
  rule-color: orange;

  rule-style: dashed;
}
li {
  text-align: center;
  aspect-ratio: 1;
}

Result

Multiple values

This example demonstrates using multiple <line-style> values as a property value, and also provides an example of all the possible styles.

We set the rule-style property to be a comma-separated list of all the possible <line-style> values.

css

ul {
  rule-style:
    dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
}

Result

As there are more values than gutters so the last values are not used.

Repeating values

This example demonstrates how, when there are fewer values in the list of styles than column and row rules, the values are repeated.

Using the same HTML and CSS as in the previous example, we include three comma-separated styles as the rule-style value:

css

ul {
  rule-style: solid, groove, double;
}

Using the `repeat()` function

This example demonstrates using the repeat() function within the rule-style property value. We use the same HTML and CSS as in the previous examples. We include a repeat() function, setting the list of two <line-style> values to be repeated 3 times.

css

ul {
  rule-style: solid, repeat(3, inset, outset), solid;
}

The repeat() function repeats two style values three times, creating a list of eight style values, so the styles are repeated for the columns, and the last values in the list are discarded for the rows.

Using `auto` within `repeat()`

This example demonstrates using auto instead of an integer within the repeat() function.

Using repeat(auto, <line-style>) we set all column and row rules to groove, except the first and last, which we set to solid.

css

ul {
  rule-style: solid, repeat(auto, groove), solid;
}

Even though there are more column than row rule lines, the <auto-repeat-line-color> enabled the creation of this symmetric effect.

@layer no-support {
  @supports not (rule-style: solid, groove) {
    body::before {
      content: "Your browser doesn't support multiple values for the rule-style property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Specifications

Specification
CSS Gaps Module Level 1 # propdef-rule-style

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content

`rule-style` CSS property

Try it

Constituent properties

Syntax

Values

Description

Repeated line styles

Auto-repeating line styles

Formal definition

Formal syntax

Examples

Basic usage

HTML

CSS

Result

Multiple values

Result

Repeating values

Using the `repeat()` function

Using `auto` within `repeat()`

Specifications

Browser compatibility

See also

Help improve MDN

rule-style CSS property

HTML

CSS

Result

Result

Help improve MDN

`rule-style` CSS property