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.

Allen Robinson

Director of Application Development
Allen has been responsible for overseeing client website development, implementation, and maintenance at Foxtrot Media for over 10 years. A Computer Science graduate from the University of Wisconsin- Madison, Robinson is a software development and content management system specialist, fluent in CSS, PHP, MySQL, HTML, and JavaScript.

Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Allen Robinson

Director of Application Development
Allen has been responsible for overseeing client website development, implementation, and maintenance at Foxtrot Media for over 10 years. A Computer Science graduate from the University of Wisconsin- Madison, Robinson is a software development and content management system specialist, fluent in CSS, PHP, MySQL, HTML, and JavaScript.

Post Details

Categories:

Languages: