.divider {
border: 32px solid transparent;
border-image:url(../svg/zigzag_96x96_border-image.svg) 32 round round;
background-color: #f33;
}
.divider {
border: 32px solid transparent;
border-image:url(../svg/wave_96x96_border-image.svg) 32 round round;
background-color: #3c93c9;
}
.divider {
border: 32px solid transparent;
border-image:url(../svg/trapeze_96x96_border-image.svg) 32 round round;
background-color: #c9743c;
}
.divider {
border: 32px solid transparent;
border-image:url(../svg/asterisk_96x96_border-image.svg) 32 round round;
background-color: grey;
}
.divider {
border: 16px solid transparent;
border-image:url(../svg/diagonal-block_48x48_border-image.svg) 16 round round;
background-color: grey;
}
.divider {
border: 16px solid transparent;
border-image: url(../svg/blocks_48x48_border-image.svg) 16 round round;
background-color: grey;
}
.divider {
border: 50px solid transparent;
border-image:url(../svg/meander_152x152_border-image.svg) 50 round round;
background-color: #5d5db1;
}
.divider {
border: 12px solid transparent;
border-image:url(../svg/stamp_36x36_border-image.svg) 12 round round;
background-color: grey;
}
This demo will only work with browsers that support
border-image
, and only reliable so if the round
value is correctly implemented.
“For a certain kind of temperament, there is a certain kind of satisfaction in doing something that cannot be perfect, but can still be done to the best of your ability.” Matthew Carter talking about designing within constrains in: My life in typefaces