User Interface CSS3

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.


.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;

Box Sizing

.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
.boxes {
box-sizing: border-box;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;


.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;