Pinterest Stumbleupon Whatsapp

Tweaking the borders around images can be quite tedious when done manually with CSS. With the manual method, you have to set the parameters of each side and the offset size of the bordered image. Border Image Generator is a web app that simplifies this process by letting you tweak your border image visually, letting you adjust the border and offset sizes through sliders. It also displays the preview of the border as you tweak it so you’ll know exactly what it looks like.

css border images

To use the Border Image Generator, simply go to its website and paste the URL of your border image in the “˜Path to Image‘ field box. Then you can start adjusting the amount of offset for each side of the border, as well as the border sizes. Once you are done, just copy the code generated in the preview box and paste it to your website code.

This web app can be very handy for any web designers as they will surely save a lot of time tweaking border images using this app.

css border images


  • Edit border image properties visually.
  • Adjust border images through sliders.
  • Preview the border as you edit.
  • Cross-browser border image CSS generation.
  • URL-based State (History + Preview in multiple browsers).
  • Web app can be accessed using 3 URLs.
  • Free, no signup is required.
  • Similar Tools: Border-Radius, CSS3 Generator, CSS3 Gradient Generator.

Check out Border Image Generator @

Leave a Reply

Your email address will not be published. Required fields are marked *