As a general rule, you should always try to check a search engine for information before posting a question. It is better to get help with interpreting what you have found rather than asking for very basic instruction. For example, the following Google query: http://www.google.com/search?sourceid=mozclient&ie=utf-8&oe=utf-8&q=html+colored+border uses the search terms: html+colored+border. It will give you a number of hits to quickly answer your colored border question.
As for the second part of your question, there are a number of ways to do what you want depending on how large the picture will be. In order to keep the text closely associated with the picture, the picture and text have to be in a box (let's call it the "Outer Box"). You then have to decide whether the box takes its width from the image, or whether you want to have a fixed width for the outer box.
Imagine you have this
OUTER BOX
+--------------------------------------+
| +--------------------------------+ |
| | PICTURE .-""""-. | |
| | / \ | |
| | /_ _\ | |
| | // \ / \\ | |
| | |\__\ /__/| | |
| | \ || / | |
| | \ / | |
| | \ __ / | |
| | '.__.' | |
| | | | | |
| | jgs | | | |
| +--------------------------------+ |
| +----------------------------+ |
| | Centered text description | |
| +----------------------------+ |
+--------------------------------------+Perhaps the simplest way to do this is with the following: <div style="width:250px;background-color:#999;border:3px inset #999;text-align:center;">
<img src="mypic.gif" alt="Picture from my alien abduction" />
<p style="margin:5px ;background-color:#000;color:#0f0;text-align:center">
Alien Picture</p>
</div>In this example, you must set div style="width:250px <<== must be >= to width of image. The image and text both should be self-centering. In addition, if you had a number of these images, you could set the property on the surrounding div to be float:left and the images would line up from left to right across the screen and then wrap around. This would allow a very flexible or "liquid" layout accomodating a wide variety of browser widths. I should add that this is all done with Cascading Style Sheets (CSS) which is the modern way to control formatting of HTML.
DE