Search code examples
csstwitter-bootstrap-3

Why is inline style being overridden?

I am trying to put a border around a div.

<div style="border-color: yellow; border-style: dotted; border: 5px;">
<p>
    This is a test.
</p>
</div>

Yet when I run this, this is what the browser shows as the actual style being applied:

<div style="border: 5px currentColor;">...</div>

The result is that no border is shown at all.

This makes no sense to me why the border styles are being overridden. I can only imagine that Bootstrap has set an !important override somewhere, but I have been unable to trace this.

Solution

  • Change the order in which you are applying inline styling. You can add all the 3 styling in the border style itself like border:5px dotted yellow;. Well if you still want to go with the way you did, just change the order. First add the border style and then specify the other styles like this.

    <div style="border: 5px; border-color: yellow; border-style: dotted;">
<p>
    This is a test.
</p>
</div>