Page 1 of 1

how to install a border image for a label?

Posted: Mon May 27, 2013 11:20 pm
by John Herdean

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


how to install a border image for a label?

Posted: Tue May 28, 2013 5:36 am
by Kateryna Grynko

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.