CSS User Interface

CSS User Interface

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

• resize: specifies whether or not an element is resizable by the user
• outline-offset: adds space between an outline and the edge or border of an element

CSS Resizing

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

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

div {  
	resize:  horizontal;  
	overflow:  auto;  
}

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

div {  
	resize:  vertical;  
	overflow:  auto;  
}

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

div {  
	resize:  both;  
	overflow:  auto;  
}

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

textarea {  
	resize:  none;  
}

CSS Outline Offset

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

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

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;  
}