WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Frame Effect to Images using Pure CSS
921
ledoc
Open In Editor
Publish Your Code
Need a Website?
Recommended
30 March 2025
Text Scramble Effect
30 November 2024
Travel website with inverted border-radius
5 May 2025
Portfolio Website HTML CSS
HTML
Copy
CSS
Copy
.roundFrame { background: url("images/floral.jpg"); margin-left: auto; margin-right: auto; display: table-cell; position: relative; overflow: hidden; width: 300px; box-shadow: inset 0 50px rgba(255, 255, 255, 0.1), inset 2px -15px 30px rgba(0, 0, 0, 0.4), 2px 2px 5px rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; vertical-align: middle; text-align: center; } .roundFrame img { width: 300px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */