Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to create Border Images in CSS?
A paragraph can be bordered easily on a web page with HTML and CSS. With that, to border the paragraph, we can also use an image. To create border images in CSS, use the border-image property. The following is the syntax of the border-image property −
Syntax
border-image: value;
The value can be −
border-image-source − The source of the image to be set as border
border-image-slice − Slice the border image. The image is slice in the following sections− four corners, four edges and the middle.
border-image-width − width of the border image
border-image-outset − Outset means extending the border image area beyond the border box
border-image-repeat − To repeat, round or stretch the border image
The border-image property is a shorthand of the above properties.
Set the text
First, add the text that would be surrounded by an image. We have created two paragraphs using the <p> tags −
<h1>Border image in CSS</h1> <p class="border1">Some random sample text inside the paragraph. This paragraph is bordered with an image.</p> <p class="border2">Some random sample text inside the paragraph. This paragraph is bordered with an image.</p>
Border image
Use the border-image property to place the image as the border for the above text. The url sets the image source. You can place an external link also for the image source. The rounded is set for the border image repeat property −
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://www.tutorialspoint.com/dbms/images/dbms-mini-logo.jpg") 30 round;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") 2% round;
}
Example
The following is the code to create border images in CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://www.tutorialspoint.com/dbms/images/dbms-mini-logo.jpg") 30 round;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") 2% round;
}
</style>
</head>
<body>
<h1>Border image in CSS</h1>
<p class="border1">Some random sample text inside the paragraph. This paragraph is bordered with an image.</p>
<p class="border2">Some random sample text inside the paragraph. This paragraph is bordered with an image.</p>
</body>
</html>
235 Views
