Menu
HTML tags can be formatted using a style attribute. To add a border using the style attribute, add the border CSS inside the quotes after style=. In the example below, we surrounded a paragraph (<p></p>) with a solid red border that is 3 pixels wide. First example with text surrounded by a red border.
Two ways:
<img src="..." border="1" />
or
<img style='border:1px solid #000000' src="..." />
Here is some HTML and CSS code that would solve your issue:
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
<img src="MyImage.gif" class="ImageBorder" />
You can also add padding for a nice effect.
<img src="image.png" style="padding:1px;border:thin solid black;">
I also prefer CSS over HTML; HTML is about content, CSS about presentation.
With CSS you have three options.
Example using internal stylesheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image with border</title>
<style type="text/css">
img.hasBorder { border:15px solid #66CC33; }
</style>
</head>
<body>
<img class="hasBorder" src="peggy.jpg" alt="" />
</body>
</html>
If you want an external stylesheet, replace the <style>...</style> block with
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />
CSS
img{border:2px solid black;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With