Develop a plugin that allows for adding border radius to iframes

I have a question regarding my CSS code that creates radius borders. When I initially load the page, only two of the four radius borders are visible. However, when I resize the browser window, all four radius borders become visible. Can someone explain why this is happening?

Here is my CSS and HTML code:

iframe, #wbf{

    border-bottom-left-radius: 23px !important;
    border-bottom-right-radius: 23px !important;
    border-top-left-radius: 23px !important;
    border-top-right-radius: 23px !important;
}

 <div class="col-md-4" id="widget">

 <iframe id="wbf" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCl%25C3%25ADnica-Materno-Infantil-Casa-Del-Ni%25C3%25B1o-SA-399571326824453%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="393" style="border:none;overflow:hidden;padding-top:0.5%" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


 </div>
htmlcss

Answer №1

When you resize the browser to a specific size, the left two round corners appear because the width of the iframe is set to 100%, and its parent container div#widget is a block element. This means that the iframe's width will always match its parent DIV. In your embedded page, the main content width is approximately 340px with white background on the left side. As a result, the top-right and bottom-right corners become invisible when the div#widget width exceeds 363px (main content width of 340px + border radius of 23px). To fix this issue, you can restrict the width of the iframe or div#widget:

#widget {
   width: 340px;
}
iframe, #wbf{
    border-radius: 23px;
}
 <div class="col-md-4" id="widget">

 <iframe id="wbf" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCl%25C3%25ADnica-Materno-Infantil-Casa-Del-Ni%25C3%25B1o-SA-399571326824453%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="393" style="border:none;overflow:hidden;padding-top:0.5%" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


 </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to enhance multiple ng-repeats efficiently with css grid

Looking to create a CSS grid table with 5 columns and an undetermined number of rows. The goal is to display a pop-up element when an element in the first column is clicked, covering columns 2 through 5. This ensures that only the first column remains visi ...

htmlcssangularjsgrid-layout

Styling with CSS: Centering elements in a flexbox container

I'm struggling to position the down arrow in the bottom center of the page using flex layout. Can someone offer assistance? Here is my current CSS/HTML code: .flex-description-container { display: flex; flex-flow: row wrap; align-items: center ...

htmlreactjscssflexbox

Steps for modifying form entries in a modal

I have a form that is accessed via a modal as described in the following code snippet. By clicking on new-lesson-plan-modal, I am able to use the generated form to input a new post entry, which will then be displayed back on the HTML. My query revolves a ...

htmldjangobootstrap-4

Delay the closure of a window by utilizing a straightforward method when selecting the "X - CLOSE" option with the following code: `<a href="javascript:window.open('', '_self').close();">X - CLOSE</a>`

I need to implement a delay when users click on the link to close a window. The purpose of this delay is to allow time for playing random "signoff" audio files, such as "Thanks!" or "See you next time!". Currently, without the delay, the audio stops abrupt ...

javascriptjqueryhtml

What is the process for transforming information from a database into a clickable hyperlink?

My course list includes the following: SE1111 SE2222 SE3333 I want to display this list on my webpage and have it redirect to a page where the course name is saved for future use. Here's what I've tried so far: <div id="join_courses" clas ...

phphtmldatabaseformshyperlink

Obscure silhouette enveloping the text enclosure

I'm a beginner in CSS and I need to create a text box like this: https://i.sstatic.net/4HQ4n.png My supervisor asked for a shadow effect around the box when clicked. How can I accomplish this? Any assistance would be greatly appreciated. ...

htmlcss

Combining various functions into a single button

I am currently working on creating a full-screen menu that functions like a modal. Everything seems to be working fine, except for the fadeOut animation. Can someone please help me understand what is causing issues with my scripts/codes? I want the content ...

javascripthtmlcssanimation

Create buttons to increase or decrease values using Bootstrap and JavaScript

What is the proper way to make this button function properly? I tested adding this line of javascript code, however it prompts an alert without clicking on the buttons as well. document.querySelector(".btnminus").addEventListener(onclick,ale ...

javascripthtmlbuttonbootstrap-5

Troubleshooting issues with the IE flexible box model functionality

Working on incorporating the flexible box model into my website has been a bit challenging. It seems to function well in webkit-based browsers like Chrome and Safari, but I'm running into issues with Mozilla, Opera, and most notably Internet Explorer. ...

cssflexbox

How can I display posts from various categories on separate pages in WordPress?

Currently tinkering with a WordPress theme and I'm hoping to display posts on various pages based on their categories. For instance, let's say the page is titled "Blog" and the post category is labeled as postBlog. Can anyone guide me on how to ...

phphtmlwordpress

I am looking for assistance constructing a task management application using vue.js

I am facing an issue with developing a to-do list using Vue.js. The goal is to add tasks to the list by entering them and clicking a button. Once added, the new task should show up under "All Tasks" and "Not finished". Buttons for marking tasks as " ...

htmlcssvue.jsvuejs2

Displaying the mean of data stored within an array, presented in a tabular format

Currently, I am attempting to utilize JavaScript to display the average value within a table. Below is the code that I have implemented. Within my code, I have included a for loop to iterate through the array. However, I am encountering an issue where onl ...

javascripthtmlarraysaverage

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

Altering HTML code using jQuery within an Angular app for a WYSIWYG editor

I am working with a wysiwyg editor that utilizes a $scope variable to generate HTML content. Currently, I am trying to dynamically add div elements at specific locations within the HTML string. This will allow me to programmatically modify different parts ...

javascriptjqueryhtmlangularjswysiwyg

How come the "colspan" attribute is not functioning properly in my table?

Check out the simple table form I created on jsfiddle. Here is the code snippet: <table> <tr> <td class="field_label">name</td> <td>*</td> <td> <input type="text"> ...

javascriptjqueryhtml

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

javascriptjqueryhtmlmenu

How can I adjust the width of a handle/thumb for NoUiSlider?

Looking to adjust the width of a NoUiSlider using CSS: .noUi-horizontal .noUi-handle { width:8px; height:25px; left: 0px; top: -8px; border: 0px solid #000000; border-radius: 0px; background: #000; cursor: default; box- ...

javascriptcssnouislider

Tips for aligning the contents of multiple tables in HTML to the center

Currently, I am in the process of designing a website where there will be four titles displayed above four images, with corresponding descriptions below each. I have utilized two separate tables for the titles and descriptions. While the layout appears fin ...

htmlcss

"Selecting the hue of an image on an input

Is it possible to easily incorporate color images into a design? I am struggling to find the property that will allow me to do so. There is a button that contains an image. .button { background: url('../image/arrow.png') 189px no-repeat ...

css

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...

htmlcss