How can I fix this border image with CSS error?

Question

I ran into some CSS error when adding border-imageand then rotated it. After turning on the border image, we could see additional lines, how could I delete it. Without rotation, everyone looks good.

height: 96px;
width: 260px;
vertical-align: middle;
display: table;
border: 26px solid transparent;
margin: 0 auto;
-webkit-border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch;
border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch;
-webkit-transition: all ease-in .3s;
transition: all ease-in .3s;
background-color: #cad584;
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
position: relative;

This is the result.

Answer 1

As commentators noted, you see smoothing around the edges of a jpeg, which has a solid background color.

Instead, use PNG with alpha transparency, so there is no visible edge for smoothing.

, - div, . , , !

HTML:

<div class="outer">
    <div class="inner">Work for Us</div>
</div>

CSS

border-image: url(/wp-content/uploads/2016/08/border-with-alpha.png) 48 stretch;

JS Fiddle : https://jsfiddle.net/ktxcs2c8/1/

URL- !

Answer 2

transform: rotate(-2deg); translateZ(1px);

translateZ(1px) , .

transform: rotate(-10deg); translateZ(1px);
transform: rotate(-4deg); translateZ(1px);
transform: rotate(6deg); translateZ(1px);