HTML CSS examples for CSS Property:outline-style
The outline-style CSS property sets the style of the outline of an element.
The following table summarizes the outline-style Property.
| Item | Value |
|---|---|
| Default value: | none |
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | No. |
The syntax of the property is as follows:
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
The following table describes the values of this property.
| Value | Description |
|---|---|
| none | No outline will be displayed. This is default value. |
| dotted | a series of dots. |
| dashed | a series of short line segments i.e. dashes. |
| solid | a single solid line. |
| double | a two parallel solid lines with some space between them. |
| groove | it were carved into the canvas. |
| ridge | the opposite effect of groove. |
| inset | makes the element's box look as though it were embedded in the canvas. |
| outset | the opposite effect of inset. |
| initial | Sets this property to its default value. |
| inherit | take the value of its parent element outline-style property. |
The example below shows the outline-style property.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS outline-style property</title> <style type="text/css"> p {<!--from w ww.j a v a2 s . c o m--> outline-style: double; outline-width: 5px; } </style> </head> <body> <p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p> </body> </html>