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

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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;