In CSS, there are two different types of border: border and outline. While border always indicates a rectangular frame, the outline frames introduced in CSS2 are intended for non-rectangular areas. And there is another difference: With outline, the border takes place outside the frame, which means that an element can be assigned both a frame with border and a border with outline.
The border definitions presented in this tutorial are particularly interesting for elements that form their own paragraph. In principle, however, they can of course also be applied to other elements.
Defining borders
The appearance of the entire border around an element can be defined with border.
The general border property is a summary of the following values, which will be discussed in detail below:
- border-color
- border-style
- border-width
The values for the individual properties are separated from each other by spaces. The order in which the properties are specified is irrelevant. There are also four sub-properties for border, which can be used to specify the border color, border thickness and border type for individual element pages.
- border-top - top border
- border-right - border right
- border-bottom - border bottom
- border-left - border left
The following example shows the use of border. This definition creates a three-point wide, black and solid border.
<p style="border:3pt solid #000000;"> Welcome </p>
The result in the browser:
The border color
The border color is determined via border-color. The following values are permitted:
- transparent - transparent border
- Color value
If only one value is specified, this applies to all frame pages. To define different colors for the individual pages, enter several values, each separated by spaces.
- Two values - the first value for the top and bottom, the second for the left and right frame color.
- Three values - the first value for the top, the second for the left and right, the third for the bottom frame color.
- Four values - the first value for the top, the second for the right, the third for the bottom and the fourth for the left border color.
The following border sub-properties can also be used:
- border-top-color - top border color
- border-right-color - border color on the right
- border-bottom-color - bottom border color
- border-left-color - border color left
An example:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
And here is the result in the browser:
The line style
The line style of the frame can be defined via border-style.
Below you will find a list of the possible border variants:
- none - invisible border
- dotted - dotted
- dashed - dashed
- solid - solid
- double - double solid
- groove - 3D line
- ridge - 3D line
- inset - 3D line
- outset - 3D line
Here is an example of how the frame types look:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none">none</p> <p class="dotted">dotted</p> <p class="dashed">dashed</p> <p class="solid">solid</p> <p class="double">double</p> <p class="groove">groove</p> <p class="ridge">ridge</p> <p class="inset">inset</p> <p class="outset">outset</p> <p class="hidden">hidden</p> </body> </html>The result in the browser:
If only one value is specified, it applies to all pages of the frame. To define frame types for the individual pages, several values are noted, each separated by spaces.
- Two values - the first value for the top and bottom, the second for the left and right frame type.
- Three values - the first value for the top frame type, the second for the left and right frame types, the third for the bottom frame type.
- Four values - the first value for the top, the second for the right, the third for the bottom and the fourth for the left border type.
The following border sub-properties can also be used:
- border-top-style - top border style
- border-right-style - border style on the right
- border-bottom-style - border type at the bottom
- border-left-style - border type left
Here is another example:
<p style="border-bottom-style: dashed;"> Dashed border </p>
And this is how it looks in the browser:
Set the border width
The width of the border is determined by border-width.
- Length specification
- thin - thin frame
- medium - medium-thick frame
- thick - thick border
If only one value is specified, it applies to all pages of the element. There are two ways to specify different frame thicknesses for individual pages. In the first option, you enter several values separated by spaces.
- Two values - the first value for the top and bottom, the second for the left and right frame width.
- Three values - the first value for the top, the second for the left and right, the third for the bottom frame width.
- Four values - the first value for the top, the second for the right, the third for the bottom and the fourth for the left frame width.
You can also use the following border sub-properties:
- border-top-width - border thickness at the top
- border-right-width - border thickness on the right
- border-bottom-width - border thickness at the bottom
- border-left-width - border thickness left
An example:
<p style="border-width:2px;border-style: dotted;"> Welcome </p>
The border color for outline
The border color is defined via the outline-color property. The specification is identical to border-color.
- invert - a color is inverted. This color is created by inverting all bits of a hexadecimal color value.
- Color specification
An example:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
This is how it looks in the browser:
The frame type for outline
The outline-style specification determines the type of outline. The same values are permitted as for border-style.
- none - invisible border
- dotted - dotted
- dashed - dashed
- solid - solid
- double - double solid
- groove - 3D line
- ridge - 3D line
- inset - 3D line
- outset - 3D line
An example:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
The frame thickness for outline
The outline-width specification is identical to border-width. This also defines the border thickness. To create a visible border line, always combine outline-width with outline-style.
- medium - medium-thick border
- thin - thin frame
- thick - thick frame
- Length specification - determines the frame thickness
An example:
<p style="outline-width: thin;outline-style: solid; outline-color: red;"> Welcome </p>
And as with border, there is also a general property for outline frames.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> p { border:red solid thick; outline:green dotted thick; } </style> </head> <body> <p>Welcome to PSD-Tutorials.de!</p> </body> </html>
This then summarizes the following properties:
- outline-width
- outline-style
- outline-color
The principle here is then identical to that of the general border property.
