How to Add an Iframe Border using CSS ? Last Updated : 29 Jul, 2024 Comments Improve Suggest changes Like Article Like Report This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax:<!-- CSS border to the iframe --><style> iframe { border: 5px solid green; }</style><!-- HTML iframe element --><iframe src="gfg.html" ></iframe>Example 1: In this example, we will add the solid border to the iframe element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <title> How to Add an Iframe Border using CSS? </title> <style> iframe { border: 5px solid green; border-radius: 8px; display: block; margin: 0 auto; width: 500px; height: 350px; } </style> </head> <body> <iframe src= "https://media.geeksforgeeks.org/wp-content/uploads/20231206095907/Age-Calculator.html" > </iframe> </body> </html> Output:Example 2: In this example, we will add dashed border to the iframe. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <title> How to Add an Iframe Border using CSS? </title> <style> iframe { border: 5px dashed green; border-radius: 8px; display: block; margin: 0 auto; width: 500px; height: 350px; } </style> </head> <body> <iframe src= "https://media.geeksforgeeks.org/wp-content/uploads/20231206095907/Age-Calculator.html" > </iframe> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Add an Iframe Border using CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League CSS-Questions Geeks Premier League 2023 +1 More Similar Reads How to Add Border Around Text using CSS? The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntaxborder: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS.HTML<p> The following text has a border <span st 1 min read How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im 1 min read Remove border from IFrame using CSS The <iframe> tag is used to embed another web page within a webpage. To remove the border from an <iframe>, you can use the frameBorder attribute in the <iframe> tag, setting its value to "0".Syntax:<iframe frameBorder="value"></iframe>Note:The frameBorder attribute is 2 min read How to create and style border using CSS ? The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val 4 min read How to Add Stroke using CSS ? Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges.Several methods can be used to add strokes usin 2 min read How to Add a Rounded Border with CSS ? A rounded border in CSS gives elements smooth, curved corners instead of sharp ones. It enhances design aesthetics and is achieved using the border-radius property. This allows developers to control the curvature, creating visually appealing and modern web layouts easily.Using the border-radius prop 2 min read How to create a 3D outset and inset border using CSS ? In this article, we will create a 3D outset and inset border using CSS. The Inset border property makes the content appear embedded (inside the surface) and on the other hand, the outset property makes the content appear embossed (outside the surface). You can achieve this task by using the border-s 2 min read How to add border in the clip-path: polygon() using CSS ? Adding a border around shapes can substantially improve the visual attractiveness of your website when it comes to web design. Using the clip-path: polygon() Property is one great and inventive approach to accomplish this. This not only allows you to make unusual shapes but also allows you to add a 3 min read How to Add Image in Text Background using HTML and CSS ? In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag 2 min read Like