angular 2 inline style borderColor not working

Question

I'm trying to change the border color , but it is not work.

There is my code:

<div [style.backgroundColor]="item.color"   [style.borderColor]="item.borderColor">

And in the css

display: inline-block;
  margin: 2px;
    border:2px solid ;//red;  
    height:25px;
    width:25px;
      border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;

The backgroundColor work , but the border not. I'm trying also :

[ngStyle]="{border: '2px solid(' + item.borderColor + ')'}"

But no effect.

Answer 1

Try this simple solution for border to work :

[ngStyle]="{'border': '2px solid' + item.borderColor}"

This worked for me.

Answer 2

You can use this

[style.border]="'2px solid ' + item.borderColor"

Hope, It will help to you.

Answer 3

Here is some solution to make border-color dynamically changed -> In your ts file wrote this:

  get myStyles(): any {
    let color = 'red';
      return {
          'border':'1px',
          'border-style': 'solid',
          'border-color':this.dtService.border_color
      };
  }

Then in your html file -> ngStyle="myStyles"

This will make your border color change dynamically. I hope this will help you in some way. Thanks