CSS User Interface – Tutorials Art

CSS User Interface lets you define the rendering and functionality of features related to the user interface such as resizing elements, outlines and box sizing.

CSS User Interface-Resizing

CSS resize property specifies that whether an element should be resized by the user or not.

div {
    border: 3px solid;
    padding: 30px;
    width: 400px;
    resize: horizontal;
    overflow: auto;
}

Outline offset

CSS outline-offset property sets the amount of space between an outline and the edge or border of an element.

div.ex1 {
  margin: 30px;
  border: 2px red;
  outline: 3px green;
  outline-offset: 17px;
}

box sizing

CSS box-sizing property sets how the total width and height of an element is calculated.

div2 {
  width: 400px;
  height: 200px;  
  padding: 60px;
  border: 3px yellow;
}