border-style: dotted solid;
We can do this because when specifying the values for border, the omitted values will be inherited from their opposite member, so if you leave off the bottom value, it will be copied from the top value, and likewise for the left and right values. In our example we have specified the top and the right value, therefore the browser can assume the bottom and the left value from the values we inputted. Helpful, right? We can take this principle and apply it to all of the border-related properties, and what’s more, we can actually take this one step further too. Let’s now look at the shorthand border property that can save us a lot of time with all of this repetition.
Remember the shorthand background property, which neatly wrapped up all of the background related properties and put them into one handy ‘background’ property for us to use? Well, that same level of convenience is given to us when working with borders. Let’s take a look at how it works.
Just as before, it’s just a single word property. In this case, it’s just ‘border’, but the property takes on multiple values. So we can pass in border-width, border-style and border-colour all in one go. Just like so: