Border for css shapes

Question

I have discovered css shapes and I'm interested is there a way to make border (solid, dotted, dashed) for them (shapes)?

The first thing that I've though about was to made another shape and put it on the background by z-index (http://jsfiddle.net/gYKSd/), but it makes an effect only as solid border.

HTML:

<div class="triangle"></div>
<div class="background"></div>

CSS:

     .triangle {
        position: absolute;
        top: 14px;
        left: 10px;
        height: 0px;
        width: 0px;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-bottom: 100px solid red;
        z-index: 0;
}
      .background {
        position: absolute;
        top: 0;
        left: 0;
        height: 0px;
        width: 0px;
        border-right: 60px dotted transparent;
        border-left: 60px dotted transparent;
        border-bottom: 120px dotted gray;
        z-index: -1;
    }

Answer 1

Your solution (positioning a background div) is about the most workable way you are going to get in CSS because the shapes are not recognized by the browser as shapes.

You can take a square, make copies and rotate them to make a point burst, and it looks like a point burst but as far as the browser is concerned, you have 3 squares, not a point burst, and if you put a border, the borders will be around each square.

You could make small rectangles, rotate them and position them on the edges of your "shape" to create a "border", so yes, it's doable, but for all practical purposes, it's insane.

If you need to draw shapes on the fly, have a look at HTML5 canvas Intro to canvas drawing.

---

SVG is now a valid option as well since all recent browsers support it.