样式设置如上表格

 1  内容在中间显示
      div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url(images/border.png);
            /* 不要跟单位 */
            border-image-slice: 30 30 30 30;
            /* border-image-slice: 30; */
            /* 这个属性默认的是 border的宽度 但是 有区别，  这个是 边框图片的宽度 不会挤压文字 */
            border-image-width: 30px;
            border-image-repeat: round;
        }
        <div class="out"> 第三方 </div>

注意 不能给里盒子设置宽高，因为设置就不能拉伸了
2 使内容显示在左上角，如下图
 <style>
        .out {
            //设置定位
            position: relative;
            width: 50px;
            height: 50px;
            background: pink;
            border: 1px solid #000;
            border-width: 51px 38px 20px 132px;
            border-image-source: url(images/border.png);
            border-image-slice: 51 38 20 132;
        }
        
        .inner {
            //设置定位
            position: absolute;
            /* background-color: skyblue; */
       //把原来的上，下，左，右的距离使用定位恢复成原来的大小
            top: -51px;
            right: -38px;
            bottom: -20px;
            left: -132px;
           //使用 padding挤一下距离
            padding: 20px;
        }
    </style>

    <div class="out">
        <div class="inner">123ggdg</div>
    </div>