Rectangle

The basic HTML code to create a rectangle is as follows:

<rect width="100" height="20" x="10" y="10"></rect>

Let's apply the following style:

      rect {
        stroke-width: 1;
        stroke:steelblue;
        fill:#888;
        fill-opacity: .5;
      }

We will create a rectangle that starts at the coordinates (10,10), and is 100 pixels wide and 20 pixels high. Based on the styling, it will have a blue outline, a gray interior, and will appear slightly opaque. See the following output and example http://localhost:8080/chapter-2/rectangle.html:

There are two more attributes that are useful when creating rounded borders (rx and ry):

<rect with="100" height="20" x="10" y="10" rx="5" ry="5"></rect>

These attributes indicate that the x and y corners will have 5-pixel curves.