Skip to content

Borders

Jump to bottom Edit New page
infamous1982 edited this page Sep 30, 2011 · 25 revisions

Borders

Border properties specify the drawing of the border of a field.

Borders are drawn around the content and padding areas in the CSS box model.

border-color

Value 1 or 4 Colors
Initial transparent
Applies To all fields and managers
Percentages N/A

Sets the border colors of a field.

If there is only one value, it specifies the color of all border edges (top, right, bottom and left).

myStyle {
	border-color: green;	/* the color of all border edges is set to green */
}

If there are four values:

  • the first value specifies the color of the top border edge
  • the second value specifies the color of the right border edge
  • the third value specifies the color of the bottom border edge
  • the fourth value specifies color of the left border edge
myStyle {
	border-color: green red green red; 
	/* the top/bottom border color is green, the left/right border color is red */
}

border-width

Value 1 or 4 Dimensions
Initial 0
Applies To all fields and managers
Percentages refer to the display width

Sets the border widths of a field.

If there is only one value, it specifies the width of all border edges (top, right, bottom and left).

myStyle {
	border-width: 5px;	/* the width for all border edges is 5px */
}

If there are four values:

  • the first value specifies the width of the top border edge
  • the second value specifies the width of the right border edge
  • the third value specifies the width of the bottom border edge
  • the fourth value specifies width of the left border edge
myStyle {
	border-width: 5px 10px 5px 10px; 
	/* the top/bottom border width is 5px, the left/right border width is 10px */
}

border-style

Value solid dashed dotted filled
Initial solid
Applies To all fields and managers
Percentages N/A

Sets the border styles of a field.

If there is only one value, it specifies the style of all border edges (top, right, bottom and left).

myStyle {
	border-style: dotted; /* the style for all border edges is dotted */
}

If there are four values:

  • the first value specifies the style of the top border edge
  • the second value specifies the style of the right border edge
  • the third value specifies the style of the bottom border edge
  • the fourth value specifies style of the left border edge
myStyle {
	border-style: solid dashed solid dashed; 
	/* the top/bottom border style is solid, the left/right border style is dashed */
}

Advanced Borders

Besides the basic properties above borders can be declared in a ‘borders’ block in a stylesheet. These borders are declared with an id to reuse them in multiple styles and with a property ‘type’ to create advanced borders.

A border in the ‘borders’ block is declared with an id, a type and properties associated with the type:

borders {
	myBorder {
		type: rounded;
		color: red;
	}
}

A border with the id ‘myBorder’ of the type ‘rounded’ is created which will draw a red rounded border

To use a border declared in the ‘borders’ section a style references the border by using the property ‘border’ and the id of the border:

style { 
	border: myBorder;
}

The above style declaration creates a style which uses the previously declared border ‘myBorder’

Alternatively, borders can be directly declared inside a style:

style { 
	border {
		type: rounded;
		color: red;
	}
}

A style is created which declares and uses an anonymous border that draws a red rounded border

Borders declared in the ‘borders’ section can also extend other borders. All properties from the border to extend are inherited and properties in the extending border are added or overwrite properties from the border to extend:

borders {
	myBorder {
		type: rounded;
		color: red; 
	}
	
	myExtendedBorder extends myBorder {
		type: rounded;
		color: green;
		width: 10px; 
	}
}

The border ‘myExtendedBorder’ extends the border ‘myBorder’ thus inheriting all properties of ‘myBorder’, overwriting the ‘color’ property and adding its own ‘width’ property

simple

Creates a simple border.

mySimpleBorder {
	type: simple; 	/* the background type is simple */
	color: red;	/* the color of the border is red */
	width: 2%; 	/* the width of the border is 2 %*/
	style: dashed;	/* the style of the border is dashed */
}

color

Value 1 or 4 Colors
Initial transparent
Applies To simple borders
Percentages N/A

Sets the border colors.

If there is only one value, it specifies the color of all border edges (top, right, bottom and left).

mySolidBorder {
	type: solid; 			
	color: red;				/* the color of the border is red */
	width: 2%; 
	style: dashed;
}

If there are four values:

  • the first value specifies the color of the top border edge
  • the second value specifies the color of the right border edge
  • the third value specifies the color of the bottom border edge
  • the fourth value specifies color of the left border edge
mySolidBorder {
	type: solid; 			
	color: green red green red; 
	/* the top/bottom border color is green, the left/right border color is red */
	width: 2%; 
	style: dashed;
}

width

Value 1 or 4 Dimensions
Initial 0
Applies To simple borders
Percentages refer to the display width

Sets the border widths.

If there is only one value, it specifies the width of all border edges (top, right, bottom and left).

mySolidBorder {
	type: solid; 			
	color: red;				
	width: 2%;	/* the width of the border is 2 %*/
	style: dashed;
}

If there are four values:

  • the first value specifies the width of the top border edge
  • the second value specifies the width of the right border edge
  • the third value specifies the width of the bottom border edge
  • the fourth value specifies width of the left border edge
mySimpleBorder {
	type: simple; 			
	color: red;				
	width: 5px 10px 5px 10px; 
	/* the top/bottom border width is 5px, the left/right border width is 10px */
	style: dashed;
}

style

Value solid dashed dotted filled
Initial solid
Applies To simple borders
Percentages N/A

Sets the border style.

If there is only one value, it specifies the style of all border edges (top, right, bottom and left).

mySimpleBorder {
	type: simple; 			
	color: red;				
	width: 2%; 				
	style: dashed;			/* the style of the border is dashed */
}

If there are four values:

  • the first value specifies the style of the top border edge
  • the second value specifies the style of the right border edge
  • the third value specifies the style of the bottom border edge
  • and the fourth value specifies style of the left border edge
mySimpleBorder {
	type: simple; 			
	color: red;				
	width: 2%; 				
	style: solid dashed solid dashed; 
	/* the top/bottom border style is solid, the left/right border style is dashed */
}

rounded

Creates a rounded border.

myRoundedBorder {
	type: rounded; 	/* the background type is rounded */
	color: red;	/* the color of the border is red */
	width: 10px; 	/* the width and height of the rounded edges is 10px */
}

color

Value 1 Color
Initial transparent
Applies To rounded borders
Percentages N/A

Sets the border color.

myRoundedBorder {
	type: rounded; 			
	color: red;	/* the color of the border is red */
	width: 10px; 
}

width

Value 1 or 4 Dimensions
Initial 0
Applies To rounded borders
Percentages refer to the display width

Specifies the width and height of the rounded edges.

If there is only one component value, it specifies the width and height of each rounded edge.

myRoundedBorder {
	type: rounded;
	color: red; 				
	width: 10px;		/* the width and height of the rounded edges is 10px */
}

If there are four values:

  • the first value specifies the height of the top left and top right edge
  • the second value specifies the width of the top right and bottom right edge
  • the third value specifies the height of the bottom left and bottom right edge
  • the fourth value specifies the width of the top left and bottom left edge
myRoundedBorder {
	type: rounded;
	color: red; 				
	width: 10px 15px 10px 15px; 	
	/* the heights of the top and bottom edges are 10px, the width of the left and right edges are 15px */
}

bevel

Creates a bevelled border.

myBevelBorder {
	type: bevel; 			/* the background type is bevel */
	outer-color: silver;	/* the inner color of the border is silver */
	inner-color: gray;		/* the outer color of the border is gray */
	width: 10px; 			/* the width of the border is 10px*/
}

outer-color

Value 1 or 4 Colors
Initial 0
Applies To bevel borders
Percentages N/A

Sets the outer border colors.

If there is only one value, it specifies the outer color of all border edges (top, right, bottom and left).

myBevelBorder {
	type: bevel; 			
	outer-color: silver;	/* the outer color of the border is silver */
	inner-color: gray;		
	width: 10px; 			
}

If there are four values:

  • the first value specifies the outer color of the top border edge
  • the second value specifies the outer color of the right border edge
  • the third value specifies the outer color of the bottom border edge
  • the fourth value specifies outer color of the left border edge
myBevelBorder {
	type: bevel; 						
	outer-color: red green red green;	
	/* the top/bottom border color outer is green, the left/right outer border color is red */
	inner-color: gray;					
	width: 10px; 						
}

inner-color

Value 1 or 4 Colors
Initial 0
Applies To bevel borders
Percentages N/A

Sets the inner border colors.

If there is only one value, it specifies the inner color of all border edges (top, right, bottom and left).

myBevelBorder {
	type: bevel; 			
	outer-color: silver;	
	inner-color: gray;	/* the inner color of the border is gray */
	width: 10px; 			
}

If there are four values:

  • the first value specifies the inner color of the top border edge
  • the second value specifies the inner color of the right border edge
  • the third value specifies the inner color of the bottom border edge
  • the fourth value specifies inner color of the left border edge
myBevelBorder {
	type: bevel; 						
	outer-color: silver;					
	inner-color: red green red green;	
	/* the top/bottom inner border color is green, the left/right inner border color is red */
	width: 10px; 						
}

width

Value 1 or 4 Dimensions
Initial 0
Applies To bevel borders
Percentages refer to the display width

Sets the border widths.

If there is only one value, it specifies the width of all border edges (top, right, bottom and left).

myBevelBorder {
	type: bevel; 
	outer-color: silver;
	inner-color: gray;	
	width: 10px; 			/* the width of the border is 10px*/
}

If there are four values:

  • the first value specifies the width of the top border edge
  • the second value specifies the width of the right border edge
  • the third value specifies the width of the bottom border edge
  • the fourth value specifies width of the left border edge
myBevelBorder {
	type: solid; 
	outer-color: silver;
	inner-color: gray;				
	width: 5px 10px 5px 10px; 
	/* the top/bottom border width is 5px, the left/right border width is 10px */
}

tiled, bitmap

Creates a bitmap border.

A tiled border is declared with the widths and heights of the corners in the specified image. The horizontal and vertical parts of the image between the declared corners are then repeated/tiled to fill the background area.

myTiledBorder {
	type: tiled;			/* the background type is bitmap*/
	image: url(bitmap.png);		/* the image is bitmap.png */
	width: 10px; 			/* the width and height of the edges is 10 pixels */
}

For example, this is the image with the width and height of 100 pixels is used in a tiled border:

The edges are specified with 10 pixels:

myTiledBorder {
	type: tiled;
	image: url(bitmap.png);
	width: 10px;
}

The resulting background for an area of 200 × 100 pixels will look like this:

image

Value 1 URL
Initial none
Applies To tiled borders
Percentages N/A

Specifies the image to use.

myTiledBorder {
	type: tiled; 	
	image: url(bitmap.png);		/* the image is bitmap.png */
	width: 10px; 	
}

width

Value 1 or 4 Dimensions
Initial 0
Applies To tiled borders
Percentages refer to the display width

Specifies the width and height of the edges.

If there is only one component value, it specifies the width and height of each edge.

myTiledBorder {
	type: tiled;			
	image: url(bitmap.png);		
	width: 10px; 			/* the width and height of the edges is 10 pixels */
}

If there are four values:

  • the first value specifies the height of the top left and top right edge
  • the second value specifies the width of the top right and bottom right edge
  • the third value specifies the height of the bottom left and bottom right edge
  • the fourth value specifies the width of the top left and bottom left edge
myTiledBorder {
	type: tiled;			
	image: url(bitmap.png);				
	width: 10px 15px 10px 15px; 	
	/* the heights of the top and bottom edges are 10px, the width of the left and right edges are 15px */
}
Add a custom footer
Add a custom sidebar
Clone this wiki locally