Page 43 - modular_v2.0_HTML&_CSS_Fb
P. 43
OUTLINE PROPERTIES
An outline is a line that is drawn around elements, to make the element stand out. Outline differs
from borders as it is drawn outside the element's border, and may overlap other content. CSS
Using Individual outline properties:
'OUTLINE-WIDTH' property is used to set the width of the outline.
'OUTLINE-STYLE' property is used to set the style of line for the outline and can have values
like Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, None, Hidden, etc.
'OUTLINE-COLOR' property is used to set the colour of the outline.
'OUTLINE-OFFSET' property is used to add space between an outline and the edge/border
of an element. The space between an element and its outline is transparent.
'OUTLINE' property is used to set the above three properties in a single statement.
Syntax: outline: outline-width outline-style outline-color;
Let us create a web page to set outline of a box.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CSS Outline</TITLE>
</HEAD>
<BODY>
<P STYLE="MARGIN: 30PX; BORDER: 2PX SOLID BLACK;
OUTLINE: 5PX SOLID RED;OUTLINE-OFFSET: 15PX;">
THIS PARAGRAPH HAS RED COLOURED OUTLINE OF 5PX BUT 15PX OUTSIDE THE BORDER
EDGE.</P>
</STYLE>
</BODY>
</HTML>
Using outline
41
Cascading Style Sheets

