How can I make this css border property one liner?

Question

I have this working css but I like to make it into one line, is it possible?

border-radius: 0;
border-color: #ccc;
border-width: 0 0 2px 0;
border-style: none none solid none;

Answer 1

This short article covers the various bits of CSS shorthand you'll encounter in your day to day work.

https://www.w3.org/community/webed/wiki/CSS_shorthand_reference

Border

border allows you to set border width, style and, color.

UPDATE:

As @torazaburo pointed out it actually requires border: 0 none #ccc for it to be correct as well as adding border-radius: 0 as it's not part of the border shorthand.

#example {
  border: 0 none #ccc;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
}

If it's not an issue that the following could take non-bottom border width and style from other rules in the cascade then this should be fine:

#example {
    border-bottom: 2px solid #ccc;
}

Produces the same CSS that you're wanting:

https://jsfiddle.net/betg5xue/5/