create double stroke / border text using CSS

This tutorial I am explaining how to create double stroke / border text using CSS as shown below.

create double stroke / border text using CSS

While developing the website we need to came across the situations like this.We can add the one stroke using the ‘text-stroke’ property and then use the text shadow as shown below.

Html code

<h1 class="heading">
    Double stroke text
</h1>

create double stroke / border text using CSS

<style>
    .heading {
        font-size: 60px;
        -webkit-text-fill-color: #8cc63f;
        -webkit-text-stroke-color: #000000;
        -webkit-text-stroke-width: 2px;
        text-fill-color: #8cc63f;
        text-stroke-color: #000000;
        text-stroke-width: 2px;
        text-shadow: -1px 1px #bd1000, 2px 1px #bd1000, 2px 2px #bd1000, -2px 2px #bd1000;
    }
</style>

Please try the above css code for getting the double stroke text and if you have any further queries please post a comment below.

Please also refer other php and wordpress tutorials

Share this Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

*