border-left: 5px solid red;
border-bottom: 5px solid red;
The above example will only show the border for the top and bottom sides of the box. When specifying individual sides as the property, rather than value, the browser does not assume from its opposite side – it must be set manually.
Let’s finish our discussion of borders with probably the most enjoyable property of all of the border-related properties: the border-radius property. Border-radius lets us specify how rounded we would like the borders of our element to be. It takes a value in either length or percentage. This property can produce wonderful results and can even allow us to render circles with pure CSS, which once was not possible at all on websites. Let’s see how it works and then we can finish off the entire border conversation with a quick exercise where we can manipulate the border-radius property to turn a square box into a nicely rounded box.
First, how it works. Just as with the other border properties, we can specify all the sides in one property; the only difference this time is instead of the first value being the top, it is now the top-left corner. The principle is still the same, working our way around the box clockwise.
Let’s see a couple of examples: