Avoid setting the same color values to your borders and text by setting the border-color property to unset.
This is handy for situations like buttons where the text color and border color should always be the same. If you have multiple color schemes for your buttons it can get tedious and messy having to set the same hex colors to both the border and text over and over again. You can simplify this by setting your border’s border-color property to unset.
Check out this example:
<style>
.button {
color: red;
border: 2px solid red;
border-color: unset;
display: inline-block;
text-decoration: none;
padding: 1em;
}
.button.blue {
color: blue;
}
.button.green {
color: green;
}
</style>
<p><a href="#" class="button">Default Button</a></p>
<p><a href="#" class="button blue">Blue Button</a></p>
<p><a href="#" class="button green">Green Button</a></p>You can also leave the color property “unset” in the initial border property declaration:
<style>
.button {
color: red;
border: 2px solid;
display: inline-block;
text-decoration: none;
padding: 1em;
}
.button.blue {
color: blue;
}
.button.green {
color: green;
}
</style>
<p><a href="#" class="button">Default Button</a></p>
<p><a href="#" class="button blue">Blue Button</a></p>
<p><a href="#" class="button green">Green Button</a></p>Note: You cannot set border to “2px solid unset” as the border shorthand property can only take color values for the color property.
