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.



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.