[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Border properties

Borders can be on every side (top, bottom, left and right) different. You can define different width-values (border-width), colors (border-color) and styles (border-style). Color and width properties can define as to any other properties, but there are also three keywords: thin, medium (the default value which is used, if the border width has not been set) and thick.

Border styles in CSS1 are dotted, dashed, solid, double, groove, ridge, inset, outset and the value none (it gives to the border width value 0). CSS2 have also property hidden, which is like previous, but takes the space like border: hidden 5px;.

If you want visible borders, the width and color are not necessary to define. If the border color has not been defined browsers should use the text color of the bordered element. Browsers need however the style of borders, because the initial value is none, which means that elements don't have any borders.

W3C: CSS2: CSS2 8 Box model; 8.5.3 Border style[Pw].

Here is an example of border definitions to the element BLOCKQUOTE (all definitions are not necessary reasonable, but however fully working ([M][S][Pw])):

blockquote
{padding:10px; /* padding to the text, which is inside the block quote (you can use also use to padding and margin values as shorthand properties according to the model, which is in the following examples); margin can have negative values, but negative values to padding are not allowed */
border: olive 5px solid; /* common shorthand properties to borders, which can later define another time; It is not possible to give different values to all side in this definition; They can be defined only by using following sub-definitions */
border-style:inset; /* in this example all side have the same style; this definition replace the value solid in the previous definition - each of the three following definitions replace always the previous definition */
border-style:inset outset; /* here the first value concerns top and bottom borders and the second left and right border */
border-style:inset outset inset; /* here the first value concerns top border, the second left and right border and the third bottom border */
border-style:inset outset inset outset; /* here the first concern top border, the second right border, the third bottom border and the fourth left border (the clockwise order) */
border-width: 10px 5px 10px; /* values works at the same logic as border-style properties and the last give value replace the first given value */ }

You can also look at some example from the page How to put CSS into Web pages[S][Pw].

Generic notes:

  1. Borders are like frames, which are set outside the elements. The only intrinsic dimensions, which they have are the thickness of them. How borders are taken account calculating dimensions of elements is depending on the width attribute or property.

  2. Borders can in theory define also with the outline property (for example butoutline:#660033 1px solid;). All edges are similar. The basic level difference with the property outline defined borders compared to the border property is the fact, that outline should not change the position of any element and it is not counted to any dimensions. It can go over all content of the document. I refer to this property also in the page 6[S].

  3. Because all kind of borders concern presentational features of element, the task of CSS2 is to able to delete all kind of borders or change their presentations. Concerning images (<IMG border=""...>) there is no basic level problems. Because browsers use by HTML defined borders as if initial properties, the type of borders is not necessary to define with CSS. <TABLE border> the situation is more complicated. CSS2 have special rules, how borders are handled in tables (I handle border-related matters in tables in the the page 10[S]).

  4. In theory CSS should be able to alter also borders of all form elements, but CSS2 doesn't have enough properties to define correct presentation for them (I handle forms later).

Browser-specific notes:

  1. MS IE interpret keyword-values thicker than Opera and Netscape (there is no instruction values and IE don't proceed against the specification). If you want exact the same width with all browsers, you must use numeric values.

  2. Styles dotted and dashed don't work with MS IE Windows browsers earlier versions than 5.5.

  3. Opera 3.51+ supports all visible borders. Newer versions support also the value hidden like Mozilla Gecko browsers.

  4. If the border colors have not been set MS IE use in tables a shade of light gray as the border colors. It is another of the colors, which the border attribute sets for table element.

  5. Outset and inset don't work with black in MS IE 5.x. The result is always different, because MS IE use more shades than Opera and Netscape. The reason is presumably that MS IE use for the TABLE element proprietary attributes, for example bordercolorlight="#eeeeee" bordercolordark="#1111111".

  6. The property outline has been worked in my tests only in some Netscape 6.x preview-versions and in Opera 7.x. I refer to the property also in the page 6[S] and CSS notes[S].

[Top]