CODEWITHSUNDEEP
htmlcssiframe
71GA
71GA

Reputation: 1391

CSS - radius on embedded iframe not working

I want to embed an iframe (Blogger) in a section on my website and make its corners round. I am using CSS and have tried to do it using overflow: hidden; like described here. For some strange reason mine isn't working - check the image.

enter image description here

CSS: 

section iframe.dnevnik{
    width: 100%; 
    height: 770px;
    border: 1px solid grey;
}   

section.dnevnik {
    margin-top: 83px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border: 2px solid black;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1.00);
    font-size: 16px;
    font-family: s10;
    text-shadow: 1px 1px 1px #EFEFEF;
    overflow: hidden;
}

implementation in HTML:

<section class="dnevnik">
  <iframe class="dnevnik" src ="http://ziga-lausegger.blogspot.com/" frameborder="0" scrolling="no"></iframe>
</section>

Can anyone tell me why isn't overflow working if i use it on a parrent element according to iframe?

Upvotes: 0

Views: 807

Answers (1)

Ian Hazzard
Ian Hazzard

Reputation: 7771

Your problem was that you were applying the border-radius: 10px; to the <section> instead of the <iframe>. You code should look like this:

section iframe.dnevnik{
    width: 100%; 
    height: 770px;
    border: 1px solid grey;
}   

iframe.dnevnik {
    margin-top: 83px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border: 2px solid black;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1.00);
    font-size: 16px;
    font-family: s10;
    text-shadow: 1px 1px 1px #EFEFEF;
    overflow: hidden;
}
<section class="dnevnik">
  <iframe class="dnevnik" src ="http://ziga-lausegger.blogspot.com/" frameborder="0" scrolling="no"></iframe>
</section>

Simply change section.dnevnik to iframe.dnevnik.

Upvotes: 2

Related Questions