Outlines are special visual properties similar to border, but take up no space in the layout. They will highlight an item without shifting its position.
An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out". It specifies the style, color, and width of an outline, but don't have separate definitions for each of the four sides.


The outline-color property sets the color of an outline.
  - Values:   - Syntax:

The "outline-color" does not work if it is used alone. You need to define the "outline-style" property before the "outline-color".


The outline-style property specifies what kind of line to display. You can define one of the fallowing values: - none specifies no outline. In the image below you can see the effect of the other values:
css outline-style
  - Syntax:


The outline-width sets the size of the border.
  - Values:   - Syntax:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <style type="text/css"><!--
 #idd {
  outline-style: dashed;
  outline-width: 2px;
  outline-color: blue;
 <div id="idd">Free Web Development courses and resources.</div>
  - Result:
Free Web Development courses and resources

outline shorthand

Using the outline shorthand property you can shorten the code. It accept three values representing outline-width, outline-style, and outline-color.
  - Syntax:
The CSS code from the above example can be rewritten like this (the effect is the same):
#idd { outline: 2px dashed blue; }

Daily Test with Code Example

Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
CSS Outline

Last accessed pages

  1. PHP MySQL - using MySQLi (1652)
  2. JavaScript Course - Free lessons (2320)
  3. Add data from form in text file in JSON format (1687)
  4. Get data from string with JSON object (316)
  5. jQuery parent, children and nth-child() (2189)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (8111)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (7886)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (7568)
  4. PHP Chat Script (6934)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (6916)