Box-sizing and box-model
Box-sizing let’s you change the behavior of the browser in calculating the width of an element. By default, box-sizing is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box. By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Firefox has this feature prefixed with
-moz-, resulting in
-moz-box-sizing. Safari 3 / WebKit uses
-webkit-box-sizing and Opera just accepts plain box-sizing.
Mozilla, Safari, Opera support box sizing proerty but IE doesn't support.
The resize property in CSS3
It allows you to specify if a box is resizable. WebKit implemented it in the latest nightlies. Below is an example box, which is resizable if your browser supports resize:
The code for this is very simple:
Now it supports resize: both; like the box above, but also resize: horizontal; and resize: vertical;. Here’s the horizontal one, which has a max-width, so you won’t break the layout completely, and a min-width so you can’t make it to small either:
And the vertical one. with a
Outlines have been expanded in CSS3 to include the
outline-offsetproperty. This allows the offset to be rendered away from the edge of the specified element. In the example below, the offset is specified as outline-offset: 12px; and the outline as
outline: 2px solid blue;
This currently works in Opera, Safari and Firefox.