border-image styles from videogames + other sources [graphics 4 U]

[ribose]

i like decorative borders! sites like the spriters resource, antique pattern library, and mac themes garden are huge sources of inspiration for me, so i've been cropping/editing/redrawing pixel art borders based on those styles and turning them into CSS border-image codes for others to copy+paste into their own web projects. there are over 50 of them in my collection now! here's a preview!

visit ribo.zone/free/snippets/borders to copy/paste/download


i hope you enjoy them!

[Melooon]

Omg these are beautiful! Thank you for putting this together! Particularly that last row in the example screenshot, suddenly I have to up my border game 

I remember you also shared a really cool pixel art border drawing site a while ago (like last year) but I've forgotten what its url was. EDIT aha its linked too - broider - You were directly responsible for the border on this site because of that link!

[ribose]

broider - You were directly responsible for the border on this site because of that link!

yay i love broider!! i think it was probably my first introduction to the border-image property, and it was definitely where i got the idea to base64 encode the images in my collection. i really like the combo of the title bar and the border you put around each gif in the giphy gallery! there's a nice balance between familiar and unexpected.

[maecom]

oh those are wonderful! i love the border-image attribute so much.
ive done a couple of them for my Mega Man Battle Network and Mega Man Shrines.
would love to contribute some of them here!


classic megaman, took the sprites directly from Mega Man 10.

Code

.menuborder {
	background: #000000;	
	border-image-slice: 6 6 6 6;
	border-image-width: 6px 6px 6px 6px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: repeat repeat;
	border-image-source: url("mm_menuborder.png");
}

battle network dialogue text, took it from Battle Network 4.

Code

.dialogue {
	
	background: #ffffe7;
	border-image-slice: 14 6 6 81;
	border-image-width: 14px 6px 6px 82px;
	border-image-outset: 12px 0px 0px 0px;
	border-image-repeat: stretch stretch;
	border-image-source: url("img/bn_dialogue.png");
	border-style: solid;
}

there's a couple others from my Battle Network shrine, but i feel those could be improved before being used by others.
hope these are neat additions to your borders, may use some for later stuff, thanks for sharing!

[ribose]

ive done a couple of them for my Mega Man Battle Network and Mega Man Shrines.
would love to contribute some of them here!

whoa, thank you, these are great! i've added them to the page and linked you as a contributor under each of them!