效果图： css代码：

 :root {
        --url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAA8CAYAAAA5S9daAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABDRJREFUaAXtms9rFVcUx8+5k5ikMZpIV6GUBKqI4jOELroNtTHYZKGFduF/0Y2uFEVduMpSdwoBS0opxSL+AkGquKiBtMRKiyBtFyJWxSQvP96bOZ47Zh4vuUlMnfNdjLy7eDNz586H7/nOr/u+DFGjEWceyN1/2qZfPRtkcYeJpSQim4h50jkeTxYqN7aMfPps9vpEd5K4Q3rMIWbakYgs6vhfheKxjtau6zzQO5/xsiWCa81MTZi+ObWLq4tHhPhrFd+aFbC01ELpexG6TI4OEslXRNy0YkxZ7RxrjqOzrQf2PMr2IbgIJsuVv1pmuXxcz/63QtSSFfB/l3plzKlBo+2bXp7kgYF5BJfmPhKEVveqaeZjNeDzPAZ4w/RKaRNxX85UP+z12wgugum1NlFMncLU4zfyN+lO4rgj5SC4ol4DtDa5RNooom16n+f3gKnTUZI+UyDcWCUitIqjitqr97NJK0tCFU9CcBFMr9W5qGWOWV74DYP21FHzrOcguAhmqnVBZv8joYcGBiiG7sXs/vUsBBfBTE3YFnc9VfH39YmwkM8IfqLziTtbh3Y/9xwEF8FMTeAD2xeomS/og/cH7VA/3rXJXY7cnexoBBfB9Hqd/9myr+9PnSucVwtu+e13aBM6vb64+YvS7/XHIrgIZmqCF96xv/82Re6cvokf1Bfy9nX+TV9bpz8YLF1ebSyCa82smeAL+Ptl9JNORkb1+fB4tYKCPuYpSqpnNu/b+yPrpRTsX+pAcC2ZwQxJxsejctfO4aSaHNP5U/9ahek/zD9YklPt+/u+Y+ZkzXFLOxBcK2ZgQlZM+cbkZ9U4OaZneEj7lo0T5ntO6ET7UOnaeldAxqpfIrh5mcuKqxfr1+evTn2yKJWjjumwXut+OlzVt8jPEUd6BZTurxy/0W0ENw9zXRN8UfLLw47pmblvdOAIsbsWV/hS53Ap9wwTwUUwN3piG+PeBwdqt4N1boc0x1pragIit0OZgNAKyxgRJiByS5+HwjJGhAmojNGlGSNRj43ouozRBric4nNLgFaXZoEkmjEaNJ8x8puM0YAWIFBaHSq3Cyow6EBphWWMBjUHiMJljEEFBh2FyxgNag4QhcsYgwoMOgqZMRrUHSAKmTEGVRh0FDJjNKg7QBQyYwyqMOgobMZoUHuAKGTGGFRh0FHIjNGg7gDRyBgDSzbeAY/XrKMwX5o1ExqvIaIwBBMWryGisMYnfPppICpea3zCp8+Yxid8agIsXkNEYQimf9vA4jVEFIZgpiagIisEF8FMTUBFVggugpmagIqsEFwEMzXB/yAiKxQXobX29Zp1ZOVN8A3BtWbWTPCCLSMrz8sagmvJrP2LzARbRVYZL1siuFbMwIRMdN7IKuOsXCK4eZlrmuDF54msVhZfv43g5mGua4IXjoqsEFwEs/7kNdbfdwdeA3JGPQQwa5RDAAAAAElFTkSuQmCC");
    }

    html, body {
        width: 100%;
        height: 100%;
        display: flex;
    }

    div {
        position: relative;
        width: 200px;
        height: 120px;
        margin: auto;
    }

    .heart {
        border: 21px solid;
        -o-border-image: var(--url) 21 round;
        border-image: var(--url) 21 round;
    }

演示效果