He mirado alrededor, y hasta donde puedo ver que no es posible, pero digamos que estás incrustando un iframe de YouTube, ¿es posible redondear esas esquinas usando CSS?¿Es posible tener CSS con esquinas redondeadas en un iframe?
El método descrito en contenedor div How to Get Rounded Corners on an iFrame using Border-Radius CSS funciona para mí.
Y para ello sólo tiene que envolver el marco flotante en las etiquetas div y dar la div estas propiedades CSS:
<div style="border-radius: 10px; width: 300px; overflow: hidden;">El
border-radiusse debe establecer en lo que quiera la redondez que sea, y elwidthdebe ajustarse al ancho del iFrame, de lo contrario, obtendrá solo unas pocas (si las hay) esquinas redondeadas. Pero lo más importante es el desbordamiento : oculto, ya que oculta las esquinas reales de iFrames.
Quizás si lo usa correctamente con una imagen de "cubierta". Algunos temas modernos ofrecen esto.
No es la mejor solución. Cuál es tu meta ?
Envolver el en un <div> debería funcionar.
#wrap {
width: 320px;
height: 320px;
-moz-border-radius: 10px;
background: red;
position: relative;
}
iframe {
width: 300px;
height: 300px;
position: absolute;
top: 10px;
left: 10px;
}<div id="wrap">
<iframe src="http://google.com" />
</div>He adjuntado una jsFiddle demostrar: http://jsfiddle.net/fxPsC/
Gracias, casi lo que yo quería, pero prefería que el iframe real tuviera esquinas redondeadas, sin bordes. No parece posible. – sren
SimonRentzke tiene razón. Incluso intenté con 'overflow: hidden', pero se ajusta a un cuadrado. –
Es posible que también desee incluir 'border-radius: 10px', sin el prefijo" -moz ". – showdev
Trate de añadir esto a tu CSS:
iframe {
border-radius: 10px;
}
El camino a seguir está terminando el iframe en un div circular, como sugieren otros usuarios. La única diferencia es que debe agregar un estilo adicional position:relative al contenedor para que funcione en el navegador Chrome.
Así que el código sería algo así:
.circle {
\t width: 320px;
\t height: 320px;
\t -moz-border-radius: 50%;
\t -webkit-border-radius: 50%;
\t border-radius: 50%;
\t overflow:hidden;
\t position:relative;
}<div class="circle">
<iframe width="640" height="480" src="https://www.youtube.com/embed/HvcOuExmeJg" frameborder="0" allowfullscreen></iframe>
</div>También puedes añadir a la etiqueta iframe si su etiqueta tiene estilo en línea:
<iframe
width=\"100%\" height=\"100%\"
frameborder=\"0\" style=\"border:0;border-radius: 25px\";
src=". $locationlink ." allowfullscreen>
</iframe>
No funciona en cromo – Ryan
@Ryan En Chrome, puede aplicar 'border-radius: 10px' directamente al iframe. – feklee
@feklee a partir de la versión actual (28.0.1500.95) una barra de desplazamiento iframe seguirá siendo cuadrada y no se redondeará. Envolverlo en un div con desbordamiento oculto tampoco funciona. La barra de desplazamiento aparecerá desbordando el contenedor. Firefox y IE funcionan bien. – Ryan