How to Create Multiple Borders in CSS3

How to Create Multiple Borders to div, h1-h6, span, p, li,  etc HTML tags without Image using only CSS, CSS3.

Firstly we have to set some HTML content to give borders. So set the HTML content first like this:

Now we have to attach some css effects to give borders, not matters how we give it. Internally or externally. Here I attach it internal CSS for the <h3> first:

We have a css property to give css effect before/after any HTML tags. So here we use exact that same thing here. We give before property first to <h3> is like this:

With the same property but now we have to use after for another border.

Here .block-head class is gives us simple border effect with bottom border with red color. .block-head::before gives us the bottom border with blue border. .block-head::after will give us the bottom border with yellow color.

From this you see the output like this.

multiple-borders

 

So, through this you give any HTML tags border as you want. For example you have to give rouded border so just give .block-head and .block-head::before only. And give border-radius and padding.