Have a question?
Message sent Close
View Categories

CSS User Interface

2 min read

CSS User Interface #

In this chapter you will learn about the following CSS user interface properties:

  • resize
  • outline-offset

rowser Support #

The numbers in the table specify the first browser version that fully supports the property.

Property Chrome Internet explorer Mozila Firefox Safari Opera
resize 4.0 79.0 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

  #

CSS Resizing #

The resize property specifies if (and how) an element should be resizable by the user.

 

Let the user resize only the width of this div element.
to resize: Click and drag the bottom right corner of this div element.

The following example lets the user resize only the width of  a element:

Example #

div { resize: horizontal; overflow: auto; }

The following example lets the user resize only the height of a <div> element:

Example #

div { resize: vertical; overflow: auto; }

The following example lets the user resize both the height and width of a <div> element:

Example #

div { resize: both; overflow: auto; }

In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:

Example #

textarea { resize: none; }

CSS Outline Offset #

The outline-offset property adds space between an outline and the edge or border of an element.

This div has an outline 15px outside the border edge.

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

The following example uses the outline-offset property to add space between the border and the outline:

Example #

div.ex1 { margin: 20px; border: 1px solid black; outline: 4px solid red; outline-offset: 15px; } div.ex2 { margin: 10px; border: 1px solid black; outline: 5px dashed blue; outline-offset: 5px; }

CSS User Interface Properties #

The following table lists all the user interface properties:

Property Description
outline-offset Adds space between an outline and the edge or border of an element
resize Specifies whether or not an element is resizable by the user

Powered by BetterDocs

Leave a Reply