WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Frame Effect to Images using Pure CSS
1242
ledoc
Open In Editor
Publish Your Code
Recommended
18 May 2024
Blur login form
11 October 2025
CSS Loading Animation: Circle Loader
26 April 2025
A Code by lebronpaulsuarezz
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) */