How to style mat table on hover

Question

I have a design for a mat-table. find the attached image. on hover, the row should look like the attached image

1: figma image of mat-table

table what I have made

stackblitz app stackblitz link:

***Mycode***
**table component.css**

        table {
        width: 100%;
        border-collapse: 'collapse' !important;
        font-family: 'biennale-regular';
        font-style: normal;
        font-weight: normal;
        background-color: white;
    }

    tr.mat-row {
        background-color: #f6f6f6;
        height: 39px !important;
        border-top: 9px solid #fff;
        border-bottom: 9px solid #fff;
        border-left: none;
        border-right: none;
    }

    td.mat-cell {
        font-size: 12px;
        color: #001C35;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    th.mat-header-cell {
        border-bottom-style: none;
        color: #001C35;
        font-weight: bold !important;
    }

    td.mat-cell:first-child {
        border-left: 2px;
        border-bottom-left-radius: 13px;
        border-top-left-radius: 13px;
    }

    td.mat-cell:last-child {
        border-right: 2px;
        border-bottom-right-radius: 13px;
        border-top-right-radius: 13px;
    }

Answer 1

First, it really helps if you can provide a StackBlitz of your issue. That way we can look at your code, and try things, without having to essentially re-create your app.

Second, Angular Material keeps its styles within its components, so you usually wind up needing to use ::ng-deep.

Finally, you have no :hover selector in your CSS. Assuming you are actually connects with the Material selectors, you'll need something like:

tr.mat-row:hover {
    border: 1px solid blue;
    border-radius: 10px;
}