How to change the borderColor of Paper component from material-ui react?

I'm using react with material-ui, In material-ui, im trying to make use of Paper component with some customization like adding borderColor to green.

Here is what i tried,

 <Paper 
       style={{ padding: 50, }}
       variant="outlined" square={true}
       classes={{
          root: classes.root, // class name, e.g. `classes-nesting-root-x`
       }}
   >
       This paper component                     
  </Paper>   

Here is my customization styles..

root: {
        borderRadius: 20,
        borderColor: '#000'
    },

BorderRadius property is working fine, But BorderColor property is not working,

Any suggestions?

Use it with withstyles in your component. This will allow you to override styles:

import React, { Component } from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import Paper from "@material-ui/core/Paper";

const styles = () => ({
  root: { borderRadius: 20, borderColor: "#000", padding: 50 }
});

export class ExampleComponent extends Component {
  render() {
    const {classes} = this.props;
    return;
    <Paper
      className={classes.root}
      variant="outlined"
      square={true}
    >
      This paper component
    </Paper>;
  }
}

export default withStyles(styles)(ExampleComponent);

If you have a theme, just rewrite the styles, this will first destructure the theme file and the properties in it, after then will execute (or override) the styles you make in this object:

const styles = theme => ({
  ...theme,
  paper: { borderRadius: 20, borderColor: "#000", padding: 50 }
});

for functional component:

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';

const MyPaper = styled(Paper)({ borderRadius: 20, borderColor: "#000", padding: 50 });

export default function StyledComponents() {
  return <MyPaper>Styled Components</MyPaper>;
}

or

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';

const styles = {
  root: { borderRadius: 20, borderColor: "#000", padding: 50 },
};

function AnotherComponent(props) {
  const { classes } = props;
  return <Paper className={classes.root}>Another component</Paper>;
}


export default withStyles(styles)(AnotherComponent);

In Material-UI v5 you can easily use the sx-property to change the color. Your code would look like that:

<Paper sx={{p: '50px', borderRadius: '20px', borderColor: 'green'}} variant="outlined">
 Content of Paper Component                     
</Paper>

Note: For padding and border-radius you most likely have to use the px unit if you don't want to use the Material-UI theme spacing (e.g. with the theme scaling factor padding: 1 would be padding: '8px', see the docs)

Setting paper's border styling globally can be achieved the following way

createTheme(theme, {
  components: {
    MuiPaper: {
      styleOverrides: {
        rounded: { border: "solid red", borderRadius: 5 },
      },
    },