How to Add Border Around Text using CSS?

How to Add an Iframe Border using CSS ?

Last Updated : 29 Jul, 2024

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:

How to Add Border Around Text using CSS?

V

vkash8574

Improve

Article Tags :

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

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 .

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

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

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

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

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

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

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

How to add border to an element on mouse hover using CSS ?

Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties. Approach HTML Structu