How to add border image around photo using CSS, HTML

 For decorative of your photo with border image (like photo frame) is necessary in number of websites. To display your photo as attractive photo frame use following CSS code, HTML code.

Photo Frame model

Most important photo is decorative to border color or border image. To see that photo very attractive. Some photo add thick color around the photos or images, some photos attach border as image, so it very impressive to see.

see below image.

Add border color to the photo

The following code as CSS shows to add border color around image

#borderimg1 {
   border: 5px solid #555;
  }

In the above code border has 3 property values assign. more info see

Add border image to the photo

see style one of CSS code for border image adding

#borderimg { 
  border: 70px solid transparent;
  padding: 2px;
    height:  420px;
  border-image: url(gold_frame.jpg) 40 stretch;
}

see style 2 of CSS code for border image adding

#borderimg {
    border: 20px solid transparent;
    padding: 1px;
    -webkit-border-image: url(RollingBorder.gif) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(RollingBorder.gif) 50 round; /* Opera 11-12.1 */
    border-image: url(RollingBorder.gif) 50 round;
  }

Above code more info see

Apply boder image around photo using HTML

see below code

<p id="borderimg">
  <img src="photo1.jpg" />
</p>

Different Border images taken and download here

• More article jQuery code for auto hide or show div tag when select option chooses
• Auto Select radio button when focus input text filed