title: Is there a shorter way to write a border on only one side?
body: <p>I got borders on all the edges by doing something like:</p>
  <p>It is actually a mistake, but at the time of the question I believe I can draw a line only to the TOP with the following code. (Actually, lines are drawn on all edges.)</p>
  <pre><code>&lt;div class=&quot;border border-blue-900 border-t-1&quot;&gt;foo&lt;/div&gt;
  </code></pre>
  <p>I wanted to display it only on one side, so I did some research.
  I noticed that when I used <code>border</code> in <code>tailwindcss</code>,
  the following was output in the output file.</p>
  <blockquote>
  <p>/**</p>
  <ul>
  <li>
  <ol>
  <li>Prevent padding and border from affecting element width.</li>
  </ol>
  </li>
  <li></li>
  <li>We used to set this in the html element and inherit from</li>
  <li>the parent element for everything else. This caused issues</li>
  <li>in shadow-dom-enhanced elements like  where the content</li>
  <li>is wrapped by a div with box-sizing set to <code>content-box</code>.</li>
  <li></li>
  <li><a href="https://github.com/mozdevs/cssremedy/issues/4" rel="noreferrer">https://github.com/mozdevs/cssremedy/issues/4</a></li>
  <li></li>
  <li></li>
  <li>
  <ol start="2">
  <li>Allow adding a border to an element by just adding a border-width.</li>
  </ol>
  </li>
  <li></li>
  <li>By default, the way the browser specifies that an element should have no</li>
  <li>border is by setting it's border-style to <code>none</code> in the user-agent</li>
  <li>stylesheet.</li>
  <li></li>
  <li>In order to easily add borders to elements by just setting the <code>border-width</code></li>
  <li>property, we change the default border-style for all elements to <code>solid</code>, and</li>
  <li>use border-width to hide them instead. This way our <code>border</code> utilities only</li>
  <li>need to set the <code>border-width</code> property instead of the entire <code>border</code></li>
  <li>shorthand, making our border utilities much more straightforward to compose.</li>
  <li></li>
  <li><a href="https://github.com/tailwindcss/tailwindcss/pull/116" rel="noreferrer">https://github.com/tailwindcss/tailwindcss/pull/116</a>
  */</li>
  </ul>
  </blockquote>
  <p>The original of this output would have come from
  <a href="https://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71" rel="noreferrer">https://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71</a></p>
  <p>I thought this was probably the cause.
  I have succeeded in applying it only to the top edge by writing the following.</p>
  <pre><code>&lt;div class=&quot;border border-blue-900 border-t-1 border-l-0 border-r-0 border-b-0&quot;&gt;foo&lt;/div&gt;
  </code></pre>
  <p>However, this is too long. Is there any way to make it shorter?</p>
  <p><strong>Note:</strong> I am also considering the following as alternatives.</p>
  <p><a href="https://stackoverflow.com/questions/68877759/how-do-i-take-it-as-a-parameter-in-jit">How do I take it as a parameter in JIT?</a></p>
  <p>This way, I can also adjust the width (not the width in the border, it is for <code>display: block</code>).</p>
  <p>What I want to do is just display it on any one side, so the above link is trying to display it on the bottom. (In other words, it doesn't matter if it's at the top, bottom, or anywhere else. It's just an example.)</p>