WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efeito de moldura em imagens usando CSS puro
1243
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
12 July 2025
formulário githup gmail
4 December 2024
Árvore de Natal Feliz!
13 June 2024
HTML
Copy
<div class="roundFrame"> <img src="https://media.glamour.com/photos/65235366b548efb40b0ccb59/master/w_1600%2Cc_limit/Glamour_Look05_0831.jpg" /> </div>
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) */
