What is the best way to add a stylish border to an iframe?

My attempt to add a border to content on my WordPress site has been unsuccessful. Since I don't know how to add a CSS file, I've been trying to achieve this using what I believe to be HTML. My coding skills are limited to what I learned in high school.

Here is the content I want to border with a simple black border of 1 or 2 pixels:

<iframe src="https://link_to_my_file/file.pdf" style="width:1000px; height:300px;" frameborder="1"></iframe>

Unfortunately, my initial approach did not work. So, I attempted the following:

<iframe src="https://link_to_my_file/file.pdf" style="width:1000px; height:300px;" frameborder="1"></iframe> <style> iframe.solid {border-style:solid} </style>

Despite this effort, the border still did not show up.

How can I properly implement the border without having to use a separate CSS file?

htmlcsswordpressiframeborder

Answer №1

To incorporate inline HTML styling, you can follow this example:

<iframe src="https://link_to_my_document/document.pdf" 
    style="width:1000px; height:300px; border: 1px solid black;"></iframe>

Answer №2

Do not expect the output to work in the snippet. There are certain attributes in HTML5 that are deprecated for <iframe>

scrolling

frameborder

align

longdesc

marginwidth

Instead of using these as inline attributes in an iframe, you can use them in CSS

DEMO: 

iframe{
border:4px solid red;
}
<iframe src="https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=WyV_WvDBOY_E8wfHmba4Aw"></iframe>

Visit this link for more information on deprecated attributes

Answer №3

To include a border in an iframe tag, simply add the border declaration within the style attribute.

<iframe src="https://link_to_my_file/file.pdf" style="width:1000px; height:300px; border: 2px solid green"></iframe>

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

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss

The issue of AngularJS inline style color not functioning in Internet Explorer 11 has been identified

Hello, I am currently attempting to dynamically change the color of a p tag. However, I am facing issues with IE-11 not supporting this functionality. How can I resolve this problem? <p style="color:{{userData.color}} !important;">{{userData.someTex ...

htmlcssangularjsstylesinline

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

I've successfully created an AngularJS App that functions properly on most browsers like Firefox, Opera, Safari, Edge, and Chrome. However, there seems to be a compatibility issue with IE 11. When attempting to open the app in IE 11, the following er ...

javascripthtmlangularjsinternet-explorer

Steps for embedding PHP files into HTML code

Within my htdocs directory, I have a folder named "try" where I connected a PHP file to an HTML file. However, the PHP file is not being included properly. Could there be an issue with my code? <?php include 'init.inc.php'; ?> Both the ...

phphtmlxampp

Mastering the utilization of React props within a Tailwind component

Looking to implement a straightforward button component in a Next App using Tailwind CSS, where I can pass values such as background color, text color, etc. through props and use them to render different types of buttons within my application. Take a look ...

cssreactjsnext.jstailwind-csstailwind-in-js

Guide on transferring a 200MB database to an HTML5 web page executed locally

In the process of creating a search tool for internal use within my organization, I have established a deployment strategy that involves: Storing an HTML5 web page on the file server. Keeping a 200MB JSON or JavaScript file in another location. Currentl ...

javascriptjqueryjsonhtml

Ways to stop CKEDITOR from automatically saving textarea or contenteditable content

I've integrated the CKEDITOR plugin for a format toolbar feature on my web application. It seems that the message shown above is a default one provided by CKEDITOR. My goal is to have users start with a blank textarea every time they visit the page, ...

javascriptjqueryhtmlbrowserckeditor

Could you offer assistance in resolving the error I am encountering with the collection.get() function?

I encountered an issue while trying to implement a database in my project. I imported 'collection' to use in my code. Here is the snippet: import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js"; import ...

javascripthtmlfirebase

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

jqueryhtmlanimationcss

Internet Explorer 7 does not display icons

When I look at my icon, I'm calling it like this: <td> <i id="sthAdd" class="icn_plus"></i> </td> and the class looks like this: .icn_plus { background: url(../images/icons/plus-14x14.png) no-repeat; width: 20px; heig ...

htmlcssinternet-explorer

Completing a form and saving data to a document

I have a form that successfully writes to a text file using PHP. However, after submitting the form, the page reloads and shows a blank page. Currently, there is a message that appears using jQuery after the form is submitted. My goal is to prevent the pa ...

javascriptphpjqueryhtmlajax

What is the best way to implement a calendar view for selecting time periods on an HTML page?

Is there a way to implement a calendar view when clicking on the input box within an HTML page? I am looking to create a function where users can select a time period to generate a file. How can this be accomplished? If possible, could you share some samp ...

javascriptjqueryhtmlmysql

Get the data in string format and save it as a CSV file

I've coded a script that transforms a JSON object into comma-separated values using the ConvertToCSV function. Now I'm wondering how to save the variable csvData as a downloadable CSV file? The code is already wrapped inside a function triggered ...

javascripthtmljsoncsv

Ensuring the alignment of the vertical centers of icons and text within the .row class

Having some trouble with the basics again, but this time I'm stuck trying to figure out how to align an icon and "Feature 1" at the top and center of the page, as shown in the image (with the cyan lines), followed by a random paragraph. <body> ...

csshtmltwitter-bootstrap

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

javascriptcss

The child fieldset is oversized with a height of 100%

I am attempting to make a fieldset child stretch to 100%, but the child (ul) is too large and causing overflow (getting cut off in my scenario). Is there a way to stretch the fieldset child to 100% without causing overflow? fieldset { height: 300px; ...

htmlcssflexbox

Is there a way to automatically refresh the page and empty the input fields after clicking the submit button on the contact form?

My knowledge of PHP and js is limited, so I may require additional guidance in incorporating those codes. Lately, I've been developing a contact form and making good progress. However, I'm struggling with figuring out how to refresh the page or ...

javascriptphphtmlcss

The new data is not being fetched before *ngFor is updating

In the process of developing a "Meeting List" feature that allows users to create new meetings and join existing ones. My technology stack includes: FrontEnd: Angular API: Firebase Cloud Functions DB: Firebase realtime DB To display the list of meeting ...

javascripthtmlangulartypescriptasynchronous

Include a triangle shape at the top of a div container that has a background image using CSS

Struggling to add a point or triangle shape to my div with a background image, finding it difficult to create enough open space. This is the desired outcome: https://i.sstatic.net/LZVaF.png This is what I have implemented so far: <div class="bg"> ...

htmlcss

Perform Addition of Two Input Values Automatically without the need for any manual clicking of buttons

Despite trying all available codes, I have been unable to make it work. Here is the code: <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta na ...

javascriptphphtmljquery