How to Add an Iframe Border using CSS ?

Last Updated : 27 Dec, 2023

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:

iframe-border

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> 