Results 1 to 2 of 2

Thread: Custom Border for Images

  1. #1
    Join Date
    Apr 2008
    Posts
    151

    Custom Border for Images

    i am designing a website with a bunch of different photographs. I am planning to a custom red border around each of these photographs. I am wondering if there is a way (prefer in CSS) where I can just type in the URL for the image and the borders will automatically surrond my photograph?

    I have tried setting my border as the background, and load up the image with the CSS tag like this:

    #image {
    padding-left: 23px;
    padding-top: 23px;
    background: url('border.jpg') no-repeat;
    }

    <div id="image">
    <img src="image.jpg">
    <br><br>
    </div>

    The problem is that the images will be of various sizes, and I will have to manually adjust the #image for each photograph. Is there an easier way?

    I have uploaded a graphical representation of my idea at: http://www.sfu.ca/~jca41/stuph/imageBorder.jpg

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I would use image software liker the free Irfanview http://www.irfanview.com/ where you create a narrow "canvas" around the image with your color.

    Or just add a border in CSS to a class:-

    .imageborder { border: 3px solid red; }

    <img class="imageborder" src="image1.jpg" alt="Image 1">
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Replies: 0
    Last Post: 30 Jan 2006, 01:21 AM
  2. Custom Pay Per Click Search Engine on your site
    By FOA in forum General Questions
    Replies: 0
    Last Post: 26 Jan 2006, 04:01 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •