Added top, left, right and bottom border color CSS properties to system

[R-Bower]

• I have followed (at least) the PR section of the contributing guide.

Related issue

The problem:

• When specifying borderColor using @material-ui/system, values aren't properly applied if the borderColor prop appears before the border<Position> prop.

Example:

// the color for border-top is `#000000` in this example
<Box borderColor="green" borderTop={1} />

Existing workarounds:

// we have to specify every property 
<Box
  border={1}
  borderColor="background.default"
  borderBottom={0}
  borderLeft={0}
  borderRight={0}
/>

// *OR* ensure that `borderColor` is ordered after the target border property
<Box
  borderTop={1}
  borderColor="background.default"
/>

Changes in the PR:

• Added borderTopColor, borderRightColor, borderBottomColor, and borderLeftColor CSS properties to @material-ui/system borders.
• Updated markdown tables in border docs to reflect the addition of these properties.

With this PR, the previous workaround is no longer necessary. Instead, users can specify the exact border<Position>Color property, like so:

<Box
  borderTop={1}
  borderTopColor="background.default"
 />

[mui-pr-bot]

Details of bundle changes (experimental)

@material-ui/system: parsed: +0.87% , gzip: +0.30%

Generated by 🚫 dangerJS against 8164daa

[mnajdova]

Changes look good, let’s also add tests that will ensure this new scenario would break again. Also, please revert the changes in the translated md files. Only the changes in borders.md are enough

[R-Bower]

Changes look good, let’s also add tests that will ensure this new scenario would break again. Also, please revert the changes in the translated md files. Only the changes in borders.md are enough

Sounds good. Where do you recommend I add these tests? I think it'd need to involve some mock rendering. The existing borders.test.js only tests the borderRadius conversion.

[mnajdova]

We’ve added the other border tests in https://github.com/mui-org/material-ui/blob/next/packages/material-ui-system/src/Box/Box.test.js I propose we add these there too.

[R-Bower]

@mnajdova I've added tests and they've passed, but test_browser-1 is failing on ci/circleci. I just checked some other recent PRs and the same test is failing for those as well.

[mnajdova]

Thanks! 👍