How to make border according to every alphabet or number

How to make border according to every alphabet or number.
I am not able to understand that how I do this?
I attached two images which told you that I want left side border of div according to given number.
Please help me for this.
Thank you.

Hi @Praveen_Kumar_Verma

There is too much room for interpretaion of what you want, it would be guessing. The images could also have some hints where the borders are meant to be.

Could you perhaps also post the html and css for the screenshot? I would be so much easier to answer then.

Actually, I have to create this from scratch.

How did you create what was needed to produce those images?

Then make the image more informative, put in some arrows and text that explains the different parts, like where the borde(s) are and what’s more than the content text, e.g.: are the round parts to be foreground images along with the text in the html?

If you zoom-out the big image which contains four section so you see that every number have right side border according to number style. I want to know that how to create that border according to number?

Perhaps if you think in terms of a background image, rather than a border…

1 Like

but how to set the background image if the number of the section are increases?

CSS can do some amazing things, but AFAIK it can’t do that (yet)

If you did not create those images, but copied them from somewhere, then I imagine that’s just what they are - images.

Please, are those actual numbers or are they parts of an image. If they are numbers the what font-family, are they outlined or are they opal. You can’t request us to create the html-css just looking at an image. How is this supposed to be implemented in a page? How is it intended to work?

If you are not going to code it, then we have a hard time guessing what you need.

It might be possible for the numbers - not for letters - if you have your number images as a sprite.

Ok. Thank you for your reply.
I will try.

I thought you might be able to do something with text-shadow but it gets too awkward and leaves odd gaps. It works for some numbers but not others and so gets too awkward.


Thank you for your reply.

Maybe with a little artistic licence this type of effect could suffice.

No need for images and is pretty much automatic.

We can also get rid of the numbers and use css counters.


Good try Paul.
To get it exactly like your examples I think it will need more than just css. It needs a bit of art-work. I think SVGs would do this, but there will be a bit of work in it, not a quick, easy solution.
I’m thinking of a text object in the svg for the number/letter with a white stroke to create the border. Then the grey block could either be a custom polygon to fit the character, or a box with a mask/clipping path on the left side to fit the character.

Having said that, I just had an idea which is an extension of Paul’s idea. Not sure if it will work yet. :thinking:


I tinkered with some widths:

.tea li {
    background:linear-gradient(to right, #fff, #fff 2em, #eaeaea 4em);
    margin:0 20px 20px 50px;
.description {

adapts to font size changes in FF.

1 Like

Ok thanks changed on last example with the counters :slight_smile:

1 Like

Hi there Praveen_Kumar_Verma,

check out the attachment, which contains
a fully responsive example. :sunglasses: (32.8 KB)



Nice example coothead :slight_smile:

The only drawback is that you would need images for every number used (although I guess that could be achieved if we assume the sections don’t run into hundreds) :wink: