Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
How to create a 3D ridge border using CSS?
Next article icon

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:


Next Article
How to create a 3D ridge border using CSS?

V
vkash8574
Improve
Article Tags :
  • Web Technologies
  • CSS
  • Geeks Premier League
  • CSS-Questions
  • Geeks Premier League 2023

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>. Syntax border: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS. [GFGTABS] HTML <p> The following text has a borde
    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 .
    1 min read
  • How to add a button to an image using CSS ?
    In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope
    4 min read
  • How to create a 3D ridge border using CSS?
    In CSS, the border-style property is used to set the line style of the border of an element. The border-style property may have one, two, three, or four values. When the specified value is one, the same style is applied to all four sides. When the specified value is two, the first style is applied t
    2 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
    2 min read
  • How to repeat border image using CSS ?
    You can repeat border images using the border-image-repeat property in CSS. It is generally used for scaling and tiling the border-image. It is used to match the middle part of the border-image to the size of the border. Syntax:border-image-repeat: stretch|repeat|round|initial|inheritNote: The borde
    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 usi
    2 min read
  • How to add rounded corner to an element using CSS ?
    In this article, we will discuss rounded corners by using CSS properties. When we remove the sharp edge of any element and give it a round shape, it is called a rounded corner. Approach: To change the sharp edge with a rounded edge we use the border-radius property. Example 1: In this example, we na
    1 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 pro
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences