Stroke caps section

user-guide/styling/index.njk

@@ -22,9 +22,25 @@ title: 07· Styling
   <li><strong>Color and opacity</strong>.</li>
   <li><strong>Width</strong> (pixels).</li>
   <li><strong>Position:</strong> center, outside, inside.</li>
-  <li><strong>Style:</strong>solid, dotted, dashed, mixed.</li>
+  <li><strong>Style:</strong> solid, dotted, dashed, mixed.</li>
 </ul>
 
+<h3 id="stroke">Stroke caps</h3>
+<p>Ever needed an arrow to point something? You can style the ends of any open paths selecting different styles for each end of an open path.</p>
+<p><img src="/img/styling-stroke-caps.gif" alt="stroke" /></p>
+
+<p>Stroke caps options:</p>
+<ul>
+  <li><strong>Line arrow:</strong> An simple line arrow (two lines at 45º) with the same width as the stroke.</li>
+  <li><strong>Triangle arrow:</strong> An solid arrowhead witht the shape of a triangle.</li>
+  <li><strong>Square marker</strong>.</li>
+  <li><strong>Circle marker</strong>.</li>
+  <li><strong>Diamond marker</strong>.</li>
+  <li><strong>Round:</strong> Adds a round ending to the end of the path.</li>
+  <li><strong>Square:</strong> Adds a rectangular ending to the end of the path.</li>
+</ul>
+<p><img src="/img/styling-stroke-caps.png" alt="stroke" /></p>
+
 <h3 id="radius">Border radius</h3>
 <p>Border radius can be applied to rectangles to edit its corners. There’s also the option to edit each corner individually.</p>
 <p><img src="/img/styling-radius.gif" alt="border radius" /></p>