CODEWITHSUNDEEP
csstwitter-bootstrap-3
Greg Gum
Greg Gum

Reputation: 37909

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.

Upvotes: 1

Views: 1106

Answers (2)

James
James

Reputation: 4580

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>

Upvotes: 3

Matyas
Matyas

Reputation: 13702

In Chrome Inpsector:

  • click the element you wish to inspect
  • On the right, select the Computed tab

There you can see the applied styles, and their sources, so it would give you an idea why it is overridden.

  • you can always use !important yourself as well.

enter image description here

Upvotes: 1

Related Questions