EverWeb Codebox

Lines & Shapes

Horizontal & Vertical Lines

Sometimes a simple horizontal or vertical line is required to divide up the content of a web page. Using images for these is not very good for page performance in the browser and they can be created very simply using and empty div and some CSS.

Using this method also allows the choice of line styles such as solid, double, dotted and dashed.

If a lot of lines are required with the same dimensions and style a class can be created with CSS. Otherwise, for one or two lines, it's easier to use an inline style like this.

Horizontal Line Code

<div style="height:0;width:900px;border:0;border-bottom:3px;border-style: solid;border-color: #000000"></div>

In the above code the div has zero height.

Change the value for width for the overall line length and the border-bottom for the width.

Border style can be set to solid, dotted, dashed or double.

Change the hex color number to a suitable color.

Vertical Line Code

<div style="height:500px;width:0;border:0;border-left:3px;border-style:double;border-color:#00FF00"></div>

A vertical line has height but no width.

The line width is adjusted by changing the value for border-left.

Chnage the border style and color the same as for the horizontal line

Hex Colors

See THIS PAGE for info about hex color numbers and get the link to download the Hex Color Picker plugin to add to the color window in all applications.

Lines Using CSS Borders

Shapes Using HTML Characters

The are a large number of shapes, pointers, symbols etc available as HTML special characters which can be useful for inserting pointers, geometric shapes other doodads. A extensive list of them can be found HERE.

Obviously, these need to be inserted as HTML in a div or paragraph so that they can be styled.

◯ █✓○♦▭→★◃


<div style="width:100%;height:100%;margin: 0;padding:0;border:none;font-size:50px;color:#FF0000">entity</div>

The above code is a div with inline styles containing the code for a single entity - in this case an empty circle.

The variables are size, color and entity.

Horizontal and vertical lines can be used to create simple rectangles by increasing the border width. The more normal method for creating them is shown on the Next Page.


Click the Easy button to find out about widgets for creating lines and shapes using HTML and CSS without having to copy and paste any code.