Ajax Loader
×

Box Image

Adding a custom border image to a textarea. This is better than using one static background image especially when dealing with responsive websites.

HTML
<textarea rows="4" cols="20" name="" id="">Some text here</textarea>
1
<textarea rows="4" cols="20" name="" id="">Some text here</textarea>
 
CSS
body {
1
body {
2
  background: #F5F5F5;
3
  text-align: center;
4
  padding: 20%;
5
}
6
 
7
textarea {
8
  width: 70%;
9
  padding: 10px;
10
  font-size: 14px;
11
  letter-spacing: 1px;
12
  color: #666666;
13
  
14
  border-width:6px 6px 6px 6px;
15
  -moz-border-image:url(http://demo.fwpolice.com/orangecity/img/border-mask.png) 6 6 6 6 repeat;
16
  -webkit-border-image:url(http://demo.fwpolice.com/orangecity/img/border-mask.png) 6 6 6 6 repeat;
17
  border-image:url(http://demo.fwpolice.com/orangecity/img/border-mask.png) 6 6 6 6 repeat;  
18
}
19
 
20
textarea:focus {
21
  background-color: #FEFEFE;
22
  color: #FF6600;
23
  outline-width: 0;
24
}
 

Box Image

CSSDeck G+