Border Panel Options in Dreamweaver’s CSS Property Panel

By Janine Warner

The Dreamweaver Border panel defines the appearance of borders around images, tables, <div> tags, and other elements. You can specify border settings on one, two, three, or four sides of an element.


You can use the border settings to create dividing lines between <div> tags that create columns or add separating lines above or below elements. The Border panel options are

  • Border-Collapse: Specify whether table borders are combined into a single border or detached as they appear in standard HTML when you use the <table> tag. The choices are Collapse, Separate (the default), and Inherit.

  • Border Spacing: Set the spacing between borders of adjacent table cells when the Border-Collapse option is set to Separate.

  • Border Color: Specify the border color for all four sides of an element by entering a hexadecimal color or by clicking the color well and using the color picker.

  • Border Top, Right, Left, and Bottom Color: Specify different colors for any or all borders of an element.

  • Border Width: Specify the width, or thickness, of the border. You can choose thin, medium, or thick, or you can specify the size in pixels, ems, or any of the other size options.

  • Border Top, Right, Left, and Bottom Width: Specify different widths for any or all of the borders of an element.

  • Border Style: Choose from any of the border style options, including Solid, Dashed, or Double.

  • Border Top, Right, Left, and Bottom Style: Specify different border styles for any or all borders of an element.

  • Border Radius: Create rounded corners on your borders. Click to place your cursor in any of the four fields located near the corners of the border preview box and enter a number to specify the amount of the radius. You can choose from any of the CSS size options by using the drop-down list.