Is border-image-width supported?
by David Storey
HTML
<div class="url number-1"></div>
<div class="url number-2"></div>
<div class="url number-3"></div>
<div class="url number-4"></div>
<div class="url length-1"></div>
<div class="url length-2"></div>
<div class="url length-3"></div>
<div class="url length-4"></div>
<div class="url percent-1"></div>
<div class="url percent-2"></div>
<div class="url percent-3"></div>
<div class="url percent-4"></div>
<div class="url auto"></div>
<div class="url mixed-2"></div>
<div class="url mixed-3"></div>
<div class="url mixed-4"></div>
CSS
div {
width: 200px;
height: 200px;
border: 20px solid red;
margin: .5em;
border-image-slice: 20;
border-image-source: url("https://dl.dropboxusercontent.com/u/444684/openwebref/images/placeholder.png");
}
.number-1 {
border-image-width: 20;
}
.number-2 {
border-image-width: 20 40;
}
.number-3 {
border-image-width: 20 30 40;
}
.number-4 {
border-image-width: 10 20 30 40;
}
.length-1 {
border-image-width: 20px;
}
.length-2 {
border-image-width: 20px 40px;
}
.length-3 {
border-image-width: 20px 30px 40px;
}
.length-4 {
border-image-width: 10px 20px 30px 40px;
}
.percent-1 {
border-image-width: 5%;
}
.percent-2 {
border-image-width: 5% 10%;
}
.percent-3 {
border-image-width: 5% 10% 15%;
}
.percent-4 {
border-image-width: 5% 10% 15% 20%;
}
.auto{
border-image-width: auto;
}
.mixed-2 {
border-image-width: 5% 10px;
}
.mixed-3 {
border-image-width: 5px 10 15%;
}
.mixed-4 {
border-image-width: 5 10% 15px auto;
}