« Web, HTML, Tech Forum

πŸŽ€ SpaceHey Custom Border Around IMAGE Tutorial

〨 Λ’Λ’ yaumi ꜝꜝ β™‘'s profile picture

Posted by 〨 Λ’Λ’ yaumi ꜝꜝ β™‘

posted

Forum: Web, HTML, Tech

View Topics View Profile

πŸŽ€ SpaceHey Custom Borders Tutorial

Do you ever see cute scalloped or lace borders around images on SpaceHey profiles and wonder, "Do you want this?" but have no idea how to code it yourself?

Screenshot-2026-08-03-1-35-50-PM
( for better look click to see on my profileΒ )Β 


How to Get It:

It’s super easy! Just wrap your image code inside a small <div> tag using CSS border-image:


<div style="display: inline-block; border: 12px solid transparent; border-image: url('YOUR_BORDER_IMAGE_URL') 10 round; padding: 0; line-height: 0;">

Β  <img src="YOUR_IMAGE_URL" style="display: block; width: 100px; height: auto;" />

</div>Β 


Example:

<div style="display: inline-block; border: 5px solid transparent; border-image: url('https://external-media.spacehey.net/media/suCL1lQdQc6TJheQ37wawnM3eWVbzwGY7Sd8_KpQLY90=/https://i.postimg.cc/s2bzt1my/Untitled1720-20241030141054-1.png') 5 round; padding: 0; line-height: 0;">

Β  <img src="https://i.pinimg.com/736x/64/51/d5/6451d525b7109b09a0bb0ded93ae2733.jpg" style="display: block;"/>


</div>



How to Customize It:YOUR_BORDER_IMAGE_URL βž” Replace with the link to your lace/scalloped border pattern.YOUR_IMAGE_URL βž” Replace with the link to your photo, stamp, or GIF.border: 12px βž” You might need to change this number! Increase it to make the frame thicker or lower it to make it thinner until it sits nicely around your image.round βž” Controls how the pattern repeats along the edges. Note: I would play around with this if you have a lace border that is small or even has curves to it!width: 100px; βž” Adjust your image size (e.g., 50px for small stamps or 150px for bigger profile graphics).Β Β 


Report Topic

0 Replies