Menu
I've looked around, and as far as I can see it's not possible, but say you're embedding a YouTube iframe, is it possible to round those corners using CSS?
802
We can use inline CSS for the iframe by using CSS inside the iframe tag.
All you need to do is put your iFrame into a DIV, and set the DIV's and iframe's position to absolute. Then set your z-index in CSS. It works great with Youtube videos in bubbles!
Style your corners.The border-radius CSS property is what adds the rounded corners. You can experiment with different values to get it the way you like. border-radius: 75px; If you want it to be a circle, add border-radius: 50%; .
The div container method described in How to Get Rounded Corners on an iFrame using Border-Radius CSS works for me.
And to do this you simply wrap the iFrame in div tags and give the div these css properties:
<div style="border-radius: 10px; width: 300px; overflow: hidden;">The
border-radiusshould be set to whatever you want the roundness to be, and thewidthmust be set to the width of the iFrame, else you will get only a few (if any) rounded corners. But the most important thing is the overflow: hidden, as this hides the iFrames real corners.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
