How does CSS 3 border-image work exactly?

Posted by Tower on Stack Overflow See other posts from Stack Overflow or by Tower
Published on 2010-03-13T14:43:25Z Indexed on 2010/03/13 14:55 UTC
Read the original article Hit count: 158

Filed under:

css3

|

border-image

|

html

Hi,

I have an image of 4x4 in size and I want to use it all around a DIV's border. The following:

-moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat

will place left and right borders, but not bottom and top. What's wrong with it? I think I have misunderstood the syntax and if that is so, how does this syntax really work?

© Stack Overflow or respective owner

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More

Related posts about border-image

How does CSS 3 border-image work exactly?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have an image of 4x4 in size and I want to use it all around a DIV's border. The following: -moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat will place left and right borders, but not bottom and top. What's wrong with it? I think I have misunderstood… >>> More
Border image on UIView

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to have a UIView subclass that has a border image, but i dont want or care about this 'new' frame/bounds around the border image itself. What i wanted to do was just use drawRect and draw outside of the rect but all drawing is clipped and i dont see a way to not clip drawing outside of this… >>> More
CSS3 background-origin property does work in firefox?

as seen on Stack Overflow - Search for 'Stack Overflow'
I want use CSS3 property to make a complicated background image which with corner shadow and so on.Including background image,left border image,right border image.So,for the <div class="outer"></div>I write the CSS below: .outer { background:url("title_main.png"); … >>> More
Html dynamically repeated border-image

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a table which border I want to have a sort of zig-zag shape. I want the table to have an automatic size; resizing depending on how big the browser is. But rrathe than just having an image that gets stretched I want a seamless image that gets repeat instead. I found out this can be done with… >>> More
How to set Border.BorderBrush from string

as seen on Stack Overflow - Search for 'Stack Overflow'
Theres a problem. I can't set value of BorderBrush fros C#-code (not in XAML): ((Border)((Image)sender).Parent).BorderBrush = "#FFBCC7D8"; How to solve this problem? >>> More