CODEWITHSUNDEEP
css
Andrew
Andrew

Reputation: 2851

How can I remove "border-top-width" css style?

Let's say I have a Button with the following CSS style:

Button {
    border:2px #eee solid;
    border-top-width: 5px;
}

This will generate a button that has a 2px border in color #eee, except the top border will be 5px in thickness.

Now, let's say I have another button that inherits this style, but for this new Button I would like to remove the border-top-width property.

So my question is, how can I set border-top-width to null or to listen to the default border style? The following doesn't work but shows what I'm trying to do:

Button.class-name {
    border-top-width: auto;
}

Note that in my situation, I can't just set the value to "2px". I need to remove the value entirely. I've tried "auto", "inherit", "initial", etc... and nothing seems to remove the "border-top-width" property...

Any ideas?

Upvotes: 0

Views: 338

Answers (4)

D.Evangelista
D.Evangelista

Reputation: 6543

You can just use the class to set the width of the button that should be 5px on top:

button {
    border:2px #eee solid;       
}

button.class-name {
    border-top-width: 5px;
}

You can, also, use the :not() CSS selector:

button{
    border:2px #eee solid;
}

button:not(.normal) {
    border-top-width: 5px;
}

Fiddle

Upvotes: 1

Quentin
Quentin

Reputation: 943100

CSS proposes an initial value which would reset it to the default value for the browser.

There is no way (and no proposed way) to set it to the value set by the previous but one rule that set it.

If you want it to take the value from border:2px #eee solid; then you must explicitly set it to 2px.

If you were using a CSS preprocessor, such as SASS, you could use a variable:

$defaultBorderWidth: 2px;
Button {
    border:$defaultBorderWidth #eee solid;
    border-top-width: 5px;
}
Button.class-name {
    border-top-width: $defaultBorderWidth;
}

You could also use this technique with native CSS variables.

Upvotes: 2

Shoaib Chikate
Shoaib Chikate

Reputation: 8975

You can use like this if you want your top border-top-width is null;

HTML code

<button>Press me</button>
<button>Hit me</button>
<button class="leave-me">Leave me</button>

CSS code:

button{
     border:2px #eee solid;
    border-top-width: 5px;
}

button.leave-me{
    border-top-width:initial;
}

JSFIDDLE

Upvotes: 0

Heatmanofurioso
Heatmanofurioso

Reputation: 1028

Eighter you put the border-top-width on your

button.class-name

Or instead of calling that property on the css, try calling it directly on your html.

Or, you can also, on the second button, call 

border-top-width:2px;

Upvotes: -1

Related Questions