Border-image, border-radius

Question

Im having trouble with a div with rounded corners and border image. The border image stays square and the div has rounded corners. What i need is the image border to work with the rounded corners from border radius.

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:2px solid;
-moz-border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
-webkit-border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
-o-border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
border-image: url(neon---horizontal-hotness-wallpapers_18493_1920x12001.jpg) 2 1 2 2 round;
width:100%;

Answer 1

border-style and border-width must be specified (not set to none or 0) for border-images to work. It has a bug where border-image incorrectly overrides border-style. This link 1 might help

Answer 2

It is not possible to have image in the place of border-radius

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by 'background-clip'). Other effects that clip to the border or padding edge (such as 'overflow' other than 'visible') also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.