November 11, 2015

Bordering Image in CSS

Here is an example of border image styling, below is the code for this example:

<head>
<style>
div#border_img {
  width:400px;
  height:60px;
  background-color: red;
  color:white;
  font-weight:bold;
  font-size: 30px;
  border:20px solid transparent;
  text-align:center;
}
div#border_img {
-ms-border-image: url(border_img.png) 100% repeat;
-moz-border-image: url(border_img.png) 100% repeat;
-webkit-border-image: url(border_img.png) 100% repeat;
-o-border-image: url(border_img.png) 100% repeat;
border-image: url(border_img.png) 100% repeat;
}
</style>
</head>
<body>
<div id="border_img">Border Image Example!</div>

</body>
</html>

See the Result:

Border Image Example!

No comments :

Post a Comment