Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style borderImageSlice Property
The HTML DOM borderImageSlice property is used to define how a border image is divided into regions. This is done by specifying the border image offsets in percentage, number or global values.
Following is the syntax for −
Setting the borderImageSlice property −
object.style.borderImageSlice = "number|%|fill|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| number | It is used for denoting pixels in a raster image or vector coordinates in a vector image. |
| % | These are used for specifying the horizontal and vertical offsets relative to the picture size. Its default value is 100%. |
| ill | It is used for preserving the border-image middle part. |
| initial | For setting this property to default value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the borderImageSlice property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
}
#b1 {
border: 30px solid transparent;
padding: 5px;
font-size:20px;
border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
border-image-slice: 60%;
}
</style>
<script>
function changeBorderSlice(){
document.getElementById("b1").style.borderImageSlice="10%";
document.getElementById("Sample").innerHTML="The border image slice is now changed";
}
</script>
</head>
<body>
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Slice” button −
Updated on: 22-Oct-2019
39 Views
Advertisements