I have developed a unique custom angular element called my-component and in its stylesheet I've added the following:
:host {
display: inline-block;
width: 55px;
}
Now, when using my-component in another component's template, I tried to style it like this:
<my-component class="my-class"></my-component>
However, the CSS file for my-component is:
.my-class {
border-radius: 4px; // NOT WORKING
box-shadow: 0 5px 9px 0 rgba(192, 195, 197, 1); // WORKING
position: relative; // WORKING
top: 30px; // WORKING
}
For some reason, the border-radius property does not seem to be applied as expected!