angularangular-material

How to add borders to a mat-raised-button?

The code below is not working. I tried using the same styling for a button without a 'mat-raised-button' property and it works, so I think it is probably some issue with this.

How do I add borders and border colours to mat-buttons?

add.html 

<button mat-raised-button class="light-button" [routerLink]="[addLink]">
   Add
</button>

styles.css

.light-button {
    height: 50px; 
    width: 150px;
    font-size: 110%;
    border-style: solid;
    border-color: blue;
    background-color: white;
}
Solution

  • you should add your styles to css of your component or if you want to set in global style.css you should use !important to override material style :

    .light-button {
    height: 50px; 
    width: 150px;
    font-size: 110%;
    border: 2px solid blue !important;
}

    demo