CODEWITHSUNDEEP
cssangular-material
rock11
rock11

Reputation: 758

Give customized border to mat-card

I am trying to give a customized border to mat-card but I'm unable to do so.I am using ng-deep to style the mat-card.I am able to get rounded border with border radius but no colored border is visible.I don't know what am I missing.Please help.Thanks in advance.

Below is my css:

 ::ng-deep .mat-card{

    border: 55px !important;
    border-radius: 30px !important;
    border: #000 !important;
   }

Upvotes: 10

Views: 38970

Answers (4)

Torsten Barthel
Torsten Barthel

Reputation: 3476

If you just want to e.g. remove the border-radius entirely you can just override some css vars. Just place a :root selector containing the overwrites in styles.scss:

:root {
    --mdc-outlined-card-container-shape: 0px;
    --mat-menu-container-shape: 0px;
    --mat-menu-container-color: #fff;
    --mat-menu-item-label-text-color: #000;
}

The example shows some additional vars for controlling the menu styles application wide. However the first is to control the border-radius of mat-card elements.

You can easily search for the specific vars inside developer console in CSS for the specific components or you just take this gist css file as reference that lists all the available vars to style the Material components application wide per your needs:

Gist Material theme azure-blue CSS vars

I know this seems a bit hacky since Angular uses SCSS out of the box and we are overwriting CSS vars but its a really fast approach to alter the overall look of your application.

Upvotes: 0

Archisman
Archisman

Reputation: 1

If you want to change the radius of the mat-card just set this CSS property and just change the number. It should work.

border-radius: var(--mdc-elevated-card-container-shape, var(--mdc-shape-medium, 16px))

Upvotes: 0

Zia Khan
Zia Khan

Reputation: 435

Use the following class in mat-card.

<mat-card class="mat-elevation-z0">
contents...............
<mat-card>

Upvotes: 2

TheUnreal
TheUnreal

Reputation: 24492

You have CSS issue, you are setting border: 55px !important; then override it with border: #000 !important;.

You should use: border: 55px solid #000

Upvotes: 15

Related Questions