Streaming live at 10am (PST)

Pixel Art style borders

Hello,
i ran into issue trying to make pixel art style website, i would like to make staggered round borders like these:

image

I am coming from design background and relatively new to Webflow, maybe someone could lead me into right direction :slight_smile:

Pixel Art defines a computer graphic that’s shown upscaled. If you make a 20 x 25px green div with a 1 px black border with a 3pt radius, taht’s exactly what you’re going to get but it’s going to be minuscule.

So your reference is more an illustration than anything else. There’s something in CSS that allows for crafting such containers, it’s border-image-slice. You need to prepare the various images assets and then use them with that property. It’s rarely used on the web, so it’s not supported by Webflow, you need custom code to make it work:

1 Like

thank you , Vincent , your answer is useful .

I am new to the whole pixel art world and it looks really interesting.

I like pixel art and I’ve been teaching myself for a couple weeks now and I feel like I’ve made good progress.
I use a XP-Pen Star 06 Painting tablet for pixel art. I am used to drawing, and painting, so when working with pixel art, it seems very “natural” for me. Of course, with this, it can get a bit messy, and you’ll have to clean up your work.