John Herdean
Posts: 0
Joined: Tue May 14, 2013 3:56 am

how to install a border image for a label?

I have an image that I would like to use as a border around a label. I wrote some css code for it but it doesnt seem to be working:

.checked-in-border {
border-image: url(../image/checkin_in_icon2.png);
-moz-border-radius: 10px;
-webkit-border-radius: .10px;
border-radius: 10px;
border-collapse: separate !important;
}

Not only that, I need this image to be transparent because it has a white background by default and the background of my container is a blue color. So, 1st its not showing any border image, then i need the border image to be transparent. WHat would be the correct code to make this work??

This is the image i want to use as a border:

Image

I want to use the image (above) around the Label "Starbucks Coffee"

Image

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

how to install a border image for a label?

Hi John,

Your image is not suitable for border-image - you can't clearly distinguish the upper border without distorting the edges. You also use border-image incorrectly. Learn more here: https://developer.mozilla.org/en-US/d...

You should use the background-image and fix the size of the item and its background.

Return to “Issues”