CODEWITHSUNDEEP
cssgoogle-chromeborderborder-image
Lee Wise
Lee Wise

Reputation: 900

CSS3 border-image Repeat Not working in Chrome 56

I have an element set with a border image that is not uniform and needs to repeat on edges. Works perfectly in all browsers except Chrome 56.0.2924.76 but fine in newer and older versions of chrome.

In the version that doesn't work, it does repeat on the edges but not where the slices are defined.

enter image description here

(Sorry, I had to blur some content, client site is not live yet)

https://jsfiddle.net/np1kmsut/1/

.main-content {
		background: url('../images/texture-bg-light.jpg');
		border-style: solid;
		border-width: 69px 74px 24px 74px;
		-moz-border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat;
		-webkit-border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat; 
		-o-border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat; 
		border-image: url(http://10poundgorilla.com/-temp/sign-border-mobile.jpg) 69 74 24 74 repeat;

		margin: 0 2rem 256px 2rem;
		padding: 3.3rem 0 0 0;
		position: relative;
		text-align: center;
 }
<div class="main-content">
<h1>Testing</h1>
</div>

Upvotes: 1

Views: 534

Answers (1)

Rich
Rich

Reputation: 3336

A quick-n-dirty solution you may have already tried would be setting the border-image-repeat property to stretch. Of course it looks...stretched.

Otherwise, the problem has to do with your image's dimensions and their interplay with the border-image slices. Use a square image (I used 250px x 250px) and you should be all set.

Fiddle

I hope this helps!

Upvotes: 1

Related Questions