CODEWITHSUNDEEP
csstwitter-bootstrap-3sass
George G
George G

Reputation: 7695

.panel-default border color

I have a bootstrap default panel:

<div class="panel panel-default">
    <div class="panel-heading">Login</div>
    <div class="panel-body">
    ...

I want remove the border, but don't want to use additional class or id, etc..

Inspecting elements in chrome I see:

.panel-default {
    border-color: #ddd;
}

That's how it got this value assigned. As I know I can overwrite css values by applying (at least) new values by same css selectors. My css file is imported after bootstrap file.

I tried:

.panel-default {
    border-color: none;
}

Does not work, but if I use:

.panel-default {
    border: none;
}

this works.

So none is not an acceptable value for border-color? or what a hack it might be? because if I assign none from inspect element feature of chrome it works.

Upvotes: 1

Views: 8230

Answers (1)

cyr_x
cyr_x

Reputation: 14257

Yes none is not a valid value of border-color, so you have to use border: none to remove it or border-color: transparent if you want to keep the border, but make it invisible.

The reason it works for chrome devtools is, that chrome is not applying invalid styles such as border-color: none and if you're changing the original style of your element, the style gets removed.

Upvotes: 4

Related Questions