A black border around a image , doesn't look good all time . Sometimes, when building a web page, you want the image to look like it has a framed border like a photograph. It looks Better than single colored border .

First, create an image that contains the frame of the image. Wrap the content with div elements and a unique id attribute value:

<div id="section">
<h2>Images on Borders</h2>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum
e pluribus unum..</p>
</div>

Then use the CSS3 border-image property to place the image along the border width of the element.

#section {
margin-right: 40px;
color: #000;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100px;
text-align: center;
border-style: solid;
border-color: #930;
border-width: 26px 39px 37px 43px;
border-image: url(frame.png) 26 39 37 43 stretch stretch;
-webkit-border-image: url(frame.png) 26 39 37 43 stretch stretch;
-moz-border-image: url(frame.png) 26 39 37 43 stretch round;
}

The border-image property is a new CSS3 property that Firefox 3.1 and later and Safari 4 and later support as of this writing. Not only does the border-image property allow you to frame content with one image that can scale, but it also provides a way to create image-rich buttons for web forms.

For example, first use HTML to create a simple button:

Submit
button {
background: none;
width: 250px;
padding: 10px 0 10px 0;
border-style: solid;
border-color: #666;
border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;
-webkit-border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;
-moz-border-image: url(bkgd-button.png) 0 17 0 15 stretch stretch;

color: white;
font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0px 0px 5px rgba(0,0,0,.8);
}

When setting an image on a border, first set the widths of the border:

border-width: 0 17px 0 17px;

Then bring in the image through the url() function with the background-image property:

border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);

The next four values should match the values of the border-width property for the top, right, bottom, and left sides of the HTML element:

border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);
border-image: url(bkgd-button.png) 0 17 0 17;

The values of 0 for border-image instruct the browser to cover the entire top and bottom borders with the border image. The values of 17 indicate that 17 pixels of the border image on the right and left sides should be used. Set the next two values to stretch so that the background image expands across the distance of the sides to create a seamless fit:

border-width: 0 17px 0 17px;
border-image: url(bkgd-button.png);
border-image: url(bkgd-button.png) 0 17 0 17 stretch stretch;

Other values besides stretch are repeat (which tiles the image) and round (which also tiles, but makes the tiling of the image fit nicely between the edges).

During this tutorial I’m going to be introducing you to CSS3 Gradients and showing you how Add Gradients. Linear gradients change color evenly along a straight line. The gradient is defined by an axis, conveniently called the gradient line, and any specified angles.

Use proprietary CSS properties to set gradients in the background of elements.

div.building {
border: 1px solid #666;
float: left;
width: 300px;
height: 300px;
margin: 20px;
background-image: -webkit-gradient(radial,center center,900,center
bottom,0,from(#0cf),to(white));
background-image: -moz-radial-gradient(center,900px,center
bottom,0,from(#0cf),to(white));
background-repeat: no-repeat;
}

As of this writing, CSS-enabled gradients are in Safari 4 and later and Firefox 3.6 and later through the use of their respective vendor-based properties.

Setting gradients in Safari :
In Safari, cite -webkit-gradient(); after the background or background-image property:

background-image: -webkit-gradient();

hen developing a web page design with a CSS-enabled gradient, I recommend using background-image over the background shorthand property so as not to lock out other background-related properties, such as those that set the background-color value of the element.


Setting gradients in Firefox :
Whereas Safari sets the type of gradient within its own proprietary property, Firefox has properties for both types of gradients: -moz-radial-gradient() and -moz-radiallinear(). Unlike the Safari gradient, you can use background-position shorthand values and unit values when setting the starting and stopping points of gradients.

Transparency with gradients :
Another interesting aspect of Firefox’s implementation of CSS gradients concerns transparency. If you don’t set a background color on an element, you can set the background color (or colors) for a gradient to be transparent by pecifying the color with RGBA:

background-image: -moz-linear-gradient(left top, left bottom,
from(rgba(153,51,0,0.3)), to(#6b3703), color-stop(0.5, #903000));

[ Since this Solution uses CSS properties that are available in only some of the more recent browsers, a workaround is to create gradients in a digital imaging program and set them through the background of images. ]

One option is to embed both the SVG and the canvas element directly into the HTML page, and then access the canvas element from script within SVG:

<!DOCTYPE html>
<head>
<title>Canvas and SVG</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="400px" height="100px" >
<p>canvas item alternative content</p>
</canvas>
<svg id="svgelem" height="400" >
<title>SVG Circle</title>
<script type="text/javascript" >
window. onload = function () {
document. getElementById("myCanvas" ). getContext('2d' );
context. fillStyle = 'rgba(0,200,0,0.7)' ;
context. fillRect(0, 0, 100, 100);
};
</script>
<circle id="redcircle" cx="100" cy="100" r="100" fill="red" stroke="#000" />
</svg>
</body>

Or you can embed the canvas element as a foreign object directly in the SVG:

<!DOCTYPE html>
<html>
<head>
<title>Accessing Inline SVG</title>
<meta charset="utf-8" >
</head>
<body>
<svg id="svgelem" height="400" width="600" >
<script type="text/javascript" >
window. onload = function () {
var context2 = document. getElementById("thisCanvas" ). getContext('2d' );
context2. fillStyle = "#ff0000" ;
context2. fillRect(0, 0, 200, 200);
};
</script>
<foreignObject width="300" height="150" >
<canvas width="300" height="150" id="thisCanvas" >
alternate content for browsers that do not support Canvas
</canvas>
</foreignObject>
<circle id="redcircle" cx="300" cy="100" r="100" fill="red" stroke="#000" />
</svg>
</body>
</html>

When the SVG element is embedded into the current web page, you can access HTML elements from within the SVG. However, you can also embed elements directly in SVG, using the SVG foreignObject element. This element allows us to embed XHTML, MathML, RDF, or any other XML-based syntax.

In both solutions, I was able to use getElementById(). However, if I want to manipulate the elements using other methods, such as getElementsByTagName(), I have to be care‐ful about which version of the method I use. For instance, I can use getElementsByTag Name() for the outer canvas element, but I would need to use the namespace version of the method, getElementsByTagNameNS, if the contained object is XML, such as RDF/ XML. Because the embedded object in the solution is HTML5, a namespace wasn’t necessary.

Once you have the canvas context, use the element like you would from script within HTML: add rectangles, draw paths, create arcs, and so on.

Rounded Border Around an Image is better than a normal image .Using Css3 we can handle the image border and can  add some extra visual effect on it.In this tutorial ,I am going to show u these things .

Set the border value and then use the CSS3 border-radius property along with its browser-specific border-radius properties.

div{
background-image: url(Smoker.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

The radius is half the distance of a circle’s diameter and is used to set the amount of curvature on the corner. The higher the value for the radius, the more rounded the corner will be.
At the time of this writing, the border-radius property isn’t supported as is; however, the proprietary properties in both Firefox and Safari replicate the effect. The main drawback (other than cross-browser support) is that the names of the border properties are not consistent.

Specifying corners :
Rounded corners are also rendered on individual corners, not just all four corners. To set the rounded effect on only one or a few corners, specify each rounded corner individually in the CSS rule. For example, the following CSS rule defines that all corners be rounded except for the top-right corner:

div#roundbkgd {
background-image: url(smoker.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
/* top-left corner */
border-top-left-radius: 40px;
-webkit-border-top-left-radius: 40px;
/* bottom-right corner */
border-bottom-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
/* bottom-left corner */

border-bottom-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;

If the image is inline, or placed within the HTML and not as a background image, the rounded borders are shown behind the image instead of clipping the image.

img {
width: 375px;
height: 500px;
border: 8px solid #666;
background: #fff;
display:block;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

[ Opera is scheduled to support border-radius for the next major release after Opera 10. ]

var square = document. getElementById("ssquare" );
square. setAttribute("width" , "500" );

// set element onclick event handler
window. onload=function () {
var object = document. getElementById("object" );
var svgdoc;
try {
svgdoc = object. contentDocument;
} catch(e) {
try {
svgdoc = object. getSVGDocument();
} catch (e) {
alert("SVG in object not supported in your environment" );
}
}
if (! svgdoc) return;
var square = svgdoc. getElementById('square' );
square. setAttribute("width" , "500" );

<!DOCTYPE html>
<head>
<title>SVG in Object</title>
<meta charset="utf-8" />
</head>
<body>
<object id="object" data="rect.svg"
style="padding: 20px; width: 600px; height: 600px" >
<p>No SVG support</p>
</object>
<script type="text/javascript" >
var object = document. getElementById("object" );
object. onload=function() {
var svgdoc;
// get access to the SVG document object
try {
svgdoc = object. contentDocument;
} catch(e) {
try {
svgdoc = object. getSVGDocument();
} catch (e) {
alert("SVG in object not supported in your environment" );
}
}
if (! svgdoc) return;
var r = svgdoc. rootElement;
// get SVG element and modify
var square = svgdoc. getElementById('square' );
square. onclick = function() {
var width = parseFloat(square. getAttribute("width" ));
width-=50;
square. setAttribute("width" , width);
var color = square. getAttribute("fill" );
if (color == "blue" ) {
square. setAttribute("fill" , "yellow" );
square. setAttribute("stroke" , "green" );
} else {
square. setAttribute("fill" , "blue" );
square. setAttribute("stroke" , "red" );
}
}
}
</script>
</body>