30 lines
1.0 KiB
HTML
30 lines
1.0 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
background-color: blue;
|
|
border: 25px solid black;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.cornersOnly {
|
|
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 50 50 50 50 repeat repeat;
|
|
}
|
|
|
|
.horizontalOnly {
|
|
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 50 25 50 25 repeat repeat;
|
|
}
|
|
|
|
.verticalOnly {
|
|
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 25 50 25 50 stretch stretch;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cornersOnly"></div>
|
|
<div class="horizontalOnly"></div>
|
|
<div class="verticalOnly"></div>
|
|
</body>
|
|
</html> |