Collection of hand-picked free HTML and pure CSS frame code examples from Codepen and other resources.

Demo image: Fancy Frame II

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Fancy Frame II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Image with Fancy Frame

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Image with Fancy Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Animation Photo Frame

Author

  • Tapas Adhikary

Made with

  • HTML / CSS

About a code

CSS Animation Photo Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Full Screen Vintage Frame with Multiple Borders

Author

  • Tudor Sf─âtosu

Made with

  • HTML / CSS

About a code

Full Screen Vintage Frame with Multiple Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Demo image: Image with Corner Frame

Author

  • James

Made with

  • HTML / CSS (SCSS)

About a code

Image with Corner Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Picture Frame

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS)

About a code

CSS Picture Frame

A picture frame created with a single div, pseudo elements and lots of box-shadow and border styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Frame Image and Title

Author

  • LittleSnippets.net

Made with

  • HTML / CSS

About a code

Frame Image and Title

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Picture Frame

Author

  • Ricky Eckhardt

Made with

  • HTML (Slim) / CSS

About a code

Picture Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS3 Picture Frame

Author

  • Bryce Snyder

Made with

  • HTML / CSS

About a code

Pure CSS3 Picture Frame

Picture of Marilyn Monroe in a picture frame made out of CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Frame

Author

  • Kaiyuan

Made with

  • HTML / CSS

About a code

Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS3 Picture Frame

Author

  • Daniel Riemer

Made with

  • HTML / CSS

About a code

CSS3 Picture Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -