WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Frame Effect to Images using Pure CSS
1729
ledoc
Open In Editor
Video
Publish Your Code
0
Recommended
11 September 2025
CSS Animation Layers: Alert & Joy
12 December 2025
Developer Portfolio: HTML, CSS, JavaScript Example
15 March 2025
MARKET
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) */