Border for css forms

Question

I found css forms, and I wonder if there is a way to make the border (solid, dashed, dashed) for them ( shapes )?

The first thing I had to do was make another shape and put it on the background using z-index ( http://jsfiddle.net/gYKSd/ ), but this only makes the effect as a 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 the background div) is the most efficient way that you are going to work in CSS, because the forms are not recognized by the browser as shapes.

You can take a square, make copies and rotate them to make a dot splash, and it looks like a dot splash, but with respect to the browser you have 3 squares, not a dot splash, and if you put a border, the borders will be around each square.

You can make small rectangles, rotate them and place them around the edges of your “shape” to create a “border”, so yes, it is doable, but for all practical purposes it is crazy.

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

---

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

Answer 2

I don’t think it’s possible, because what you do depends on the shapes made from the borders.

You cannot add boundaries to what is already a boundary.

But, as you showed in your violin, you can emulate another border, having the shape of a background.

Answer 3

As stated above ... CSS shapes are made with solid borders and corners coming close to each other, so you cannot change the style of the frame or you will not create the desired shape