Using the Stroke Element

This topic describes VML, a feature that is deprecated as of Windows Internet Explorer 9. Webpages and applications that rely on VML should be migrated to SVG or other widely supported standards.

Note  As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.

Using <stroke>

As you've learned, you can use the strokecolor and strokeweight property attributes of a predefined shape -- such as <oval> , <line>, <polyline>, <curve>, <rect>, <roundrect>, <arc> -- to specify the color and weight of a shape's outline. In this topic, we will illustrate how to draw a shape that has a more advanced outline.

You can place the <stroke> sub-element inside the <shape>, or <shapetype>, or any predefined shape element to describe how to draw the outline of the shape. You can then use the property attributes -- for example, dashstyle, opacity, linestyle, joinstyle, filltype -- of the <stroke> sub-element to customize the outline.

Back to top

dashstyle

You can use the dashstyle property attribute of the <stroke> sub-element to draw an outline with various dash styles.

Examples:

If you specify <v:stroke dashstyle="solid" /> inside the <line> element, you can create a solid line, as shown in the following VML representation:

solid.gif (96 bytes)



<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="solid" />
</v:line>


Show Me

If you change the dashstyle property attribute to "dot", you can create a dotted line, as shown in the following VML representation:

dot.gif (144 bytes)



<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dot" />
</v:line>


Show Me

If you change the dashstyle property attribute to "dash", you can create a dash line, as shown in the following VML representation:

dash.gif (137 bytes)



<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dash" />
</v:line>


Show Me

If you change the dashstyle property attribute to "dashdot", you can create a line with a dashed and dotted style, as shown in the following VML representation:

dashdot.gif (145 bytes)



<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dashdot" />
</v:line>


Show Me

If you change the dashstyle property attribute to "longdash", you can create a line with a long dashed style, as shown in the following VML representation:

longdash.gif (123 bytes)



<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="longdash" />
</v:line>


Show Me

If you change the dashstyle property attribute to "longdashdot", you can create a line with a long dashed and dotted style, as shown in the following VML representation:

Longdashdot.gif (135 bytes)



<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="longdashdot" />
</v:line>


Show Me

If you place <v:stroke dashstyle="dashdot" /> inside the <rect> element, you can create a rectangle that has a dashed and dotted outline, as shown in the following VML representation:

rect.gif (615 bytes)



<v:rect style='width:100pt;height:80pt' strokecolor="red" strokeweight="2pt"/>
<v:stroke dashstyle="dashdot" />
</v:rect>


Show Me

Back to top

opacity

You can use the opacity property attribute of the <stroke> sub-element to draw an outline with various opacity styles. The value for the opacity property attribute can be any number between 0 to 1. By default, it is 1, indicating full opacity.

Examples:

The following VML representation creates a line with full opacity:

line1.gif (96 bytes)



<v:line style='position:relative;' from="20pt,50pt" to="200pt,50pt" strokecolor="red"
strokeweight="2pt">
</v:line>


Show Me

If you add <v:stroke opacity="0.5" /> inside the <line> element, you can create a line with 50% opacity, as shown in the following VML representation:

line2.gif (108 bytes)



<v:line style='position:relative;' from="20pt,50pt" to="200pt,50pt" strokecolor="red"
strokeweight="2pt">
<v:stroke opacity="0.5" />
</v:line>


Show Me

Back to top

linestyle

You can use the linestyle property attribute of the <stroke> sub-element to draw an outline with various line styles.

Examples:

If you specify <v:stroke linestyle="single" /> inside the <rect> element, you can create a rectangle with a single outline, as shown in the following VML representation:

single.gif (537 bytes)



<v:rect style='width:120pt;height:80pt' strokecolor="red" strokeweight="10pt">
<v:stroke linestyle="single" />
</v:rect>


Show Me

If you change the linestyle property attribute to "thinthin", you can create a rectangle with the outline (1:1:1), as shown in the following VML representation:

thinthin.gif (642 bytes)



<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thinthin" />
</v:rect>


Show Me

If you change the linestyle property attribute to "thinthick", you can create a rectangle with the outline (1:1:2), as shown in the following VML representation:

Thinthick.gif (646 bytes)



<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thinthick" />
</v:rect>


Show Me

If you change the linestyle property attribute to "thickthin", you can create a rectangle with the outline (2:1:1), as shown in the following VML representation:

Thickthin.gif (676 bytes)



<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thickthin" />
</v:rect>


Show Me

If you change the linestyle property attribute to "thickbetweenthin", you can create a rectangle with the outline (1:1:2:1:1), as shown in the following VML representation:

ThickBthin.gif (669 bytes)



<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thickbetweenthin" />
</v:rect>


Show Me

Back to top

joinstyle

You can use the joinstyle attribute of the <stroke> sub-element to define how lines are joined together.

For example, to create a shape that has the round-join outline, as shown in the following illustration, you can specify <v:stroke joinstyle="round" /> inside the <polyline> element, as shown in the following VML representation:

round.gif (660 bytes)



<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="round" />
</v:polyline>


Show Me

If you change the joinstyle property attribute to "bevel", you can create a shape that has the bevel-join outline, as shown in the following VML representation:

bevel.gif (650 bytes)



<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="bevel" />
</v:polyline>


Show Me

If you change the joinstyle property attribute to "miter", you can create a shape that has the miter-join outline, as shown in the following VML representation:

miter.gif (702 bytes)



<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="miter" />
</v:polyline>


Show Me

Back to top

filltype

You can use the filltype property attribute of the <stroke> sub-element to draw an outline with various fill effects.

Examples:

If you specify <v:stroke filltype="solid" /> inside the <roundrect> element, you can create a rounded rectangle with the solid-filled outline, as shown in the following VML representation:

solid.gif (701 bytes)



<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="solid" />
</v:roundrect>


Show Me

If you change the filltype property attribute to "pattern", point the src property attribute to the location of the pattern image file, and set the color2 property attribute to the second pattern color, you can create a rounded rectangle with a pattern outline, as shown in the following VML representation:

pattern.gif (1055 bytes)



<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="pattern" src="image.gif"
color2="green" />
</v:roundrect>


Show Me

If you change the filltype property attribute to "tile" and point the src property attribute to the location of the image file, you can create a rounded rectangle with a tiled outline, as shown in the following VML representation:

tile.gif (6617 bytes)



<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="tile" src="image2.gif" />
</v:roundrect>


Show Me

If you change the filltype property attribute to "frame" and point the src property attribute to the location of the image file, you can create a rounded rectangle with a picture outline, as shown in the following VML representation:

frame.gif (6203 bytes)



<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="frame" src="image2.gif" />
</v:roundrect>


Show Me

For more information about this element, see the VML specification .

 

 

Send comments about this topic to Microsoft

Build date: 2/7/2012

Community Additions

ADD
Show: