SPFx: Unwanted border on click of Document Card in React JS

Question

I am creating SPFx webpart using React JS. On click in document card component I am getting unwanted border.

I tried removing it but not working. I have applied border-radius on document card style, but still getting square border.

if i remove on-click this border goes.

                const cardStyles: IDocumentCardStyles  = {
                  root: [
                    {
                      display: 'inline-block', marginRight: 20, borderRadius: 25,  marginBottom: 20,width: 90, 
                backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'white',textAlign: "center" ,color:"white",
                selectors: {
                  ':hover': {
                    backgroundColor:'#ff9933' ,outline:'none',borderColor:'white',borderRadius: 25

                  },

                }
                    }
                  ]
                };



                return(
                    <DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.Template)}>
                    <DocumentCardTitle   title={items.Template} />
                    <DocumentCardImage styles={cardStyles1}  height={100}imageFit={ImageFit.cover}  imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
                    </DocumentCard>);