# Shapes: `<line>`, `<rectangle>`

## `<line>`

A straight line between two points, `(x, y)` and `(x2, y2)`.

```xml
<line y="65" x2="700" y2="65" width="7" />
```

```{eval-rst}
.. autopydantic_model:: todays_paper_web.widgets.core.line.LineParams
   :inherited-members: BaseModel
```

`x`/`y` (shown above via `ViewParams`, which every widget's `Params` inherits — see
{doc}`../api/index`) do double duty here specifically: they're both the line's own start coordinate *and*
(like on any other widget) the position its parent container places it at, since the rendered image is
cropped tightly to the line's bounding box starting at that same point — so a diagonal line's `x`/`y`
behaves consistently whether you think of it as "where the line starts" or "where the box places this
element".

## `<rectangle>`

An outlined or filled rectangle, with optional rounded corners.

```xml
<rectangle x="0" y="0" width="{{ width }}" height="70" fill="true" color="#5c5c5c" />
```

```{eval-rst}
.. autopydantic_model:: todays_paper_web.widgets.core.rectangle.RectangleParams
   :inherited-members: BaseModel
```

`color` accepts a CSS color name or a `#hex` code; `radius`/`corners` behave as on any rounded shape —
`radius="0"` (the default) draws sharp corners, and `corners` picks which ones a positive radius rounds
(`all`, `none`, `top`, `bottom`, `left`, `right`, or a comma-separated list of `tl`/`tr`/`br`/`bl`, e.g.
`corners="tl,tr"` to round only the top).

Every widget in this reference validates its own attributes (see {doc}`../api/index`); `<line>` and
`<rectangle>` specifically are worth calling out because an unrecognized `color` or `fill` value raises a
render error rather than silently falling back to a default.