In my application, I have a common HTML component styled as follows:
.box {
min-width: 100px;
padding: 20px 10px;
}
There are over 100 of these components and they each have a unique border style without a bottom border:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There is a specific page in the application where I need all these boxes to display with full borders, including the bottom border. I attempted to override the .box definition for this page:
.box {
border-bottom: initial; /* also tried unset...*/
}
However, removing the 'border-bottom:none' line still does not result in the desired border appearance. Is there a way to globally specify a full border for all .box elements, or do I need to individually redefine each bottom border?
-Dan