title: material-ui - How to change borderColor?
body: <p>I'm trying to add <code>border-top</code> and <code>border-bottom</code> to the <code>&lt;Box&gt;</code> component in Material UI (using React).</p>
  <p>By following the official documentation <a href="https://material-ui.com/system/borders/" rel="nofollow noreferrer">https://material-ui.com/system/borders/</a><br />
  I've added the following code in my app:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Container } from &quot;@material-ui/core&quot;;
  import Box from &quot;@material-ui/core/Box&quot;;
  
  const App = () =&gt; (
    &lt;Container&gt;
      &lt;Box 
         borderColor=&quot;primary.main&quot; 
         borderTop={4} 
         borderBottom={4}
      &gt;
        QUOTE, and preview
      &lt;/Box&gt;
    &lt;/Container&gt;
  );
  
  export default App;
  </code></pre>
  <p>And the result in the browser is as follows:</p>
  <p><a href="https://i.stack.imgur.com/e4nd8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e4nd8.png" alt="enter image description here" /></a></p>
  <p>As you can see the border-color is not applied uniformly to the top and the bottom, as I would expect.<br />
  I am expecting both borders (top and bottom) to be blue, as per <code>primary.main</code>.</p>
  <p>By looking at the DOM in the browser I see the border-top color defined as expected, whereas the border-bottom color is not even defined. See the screenshot below.</p>
  <p><a href="https://i.stack.imgur.com/me4RK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/me4RK.jpg" alt="enter image description here" /></a></p>
  <p>What am I missing?</p>