CSS3 Offers For Interfacing

CSS3 Offers for Interfacing is the section 12 and the final section of Basics of CSS3.

With CSS3 there comes advanced features to support creating user interfaces. Such as resizing elements, box sizing, and outlining. Look at the complete list it offers.

Property Description CSS
appearance Allows you to make an element look like a standard user interface element 3
box-sizing Allows you to define certain elements to fit an area in a certain way 3
icon Provides the author the ability to style an element with an iconic equivalent 3
nav-down Specifies where to navigate when using the arrow-down navigation key 3
nav-index Specifies the tabbing order for an element 3
nav-left Specifies where to navigate when using the arrow-left navigation key 3
nav-right Specifies where to navigate when using the arrow-right navigation key 3
nav-up Specifies where to navigate when using the arrow-up navigation key 3
outline-offset Offsets an outline, and draws it beyond the border edge 3
resize Specifies whether or not an element is resizable by the user 3

Let’s go through what are the important ones because some of them are still not supported by all the web browsers.

CSS3 Resizing

In CSS3, the resize property specifies whether or not an element should be resizable by the user. Before CSS3, this feature only applied for HTML text area element and it came by default. But now you can specify whether some element is resizable or not by the user. Look at the following division. You’ll see some mark in the bottom right corner. Click and drag it. You’ll see with your own eyes, what would happen.

Click and drag the bottom right marker in here
[code language=”css”] div{
resize: both;
overflow: auto;

CSS3 Box Sizing

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. Should they include the border-box or just the content-box which is the default value of the width and height properties. For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to “border-box”. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

Look at the following example. It specify two bordered boxes side by side.

This div occupies the left half.
This div occupies the right half.
[code language=”css”] div{
box-sizing: border-box;
width: 50%;
float: left;

CSS3 Outline Offset

The outline-offset property offsets an outline, and draws it beyond the border edge. Outlines differ from borders in two ways:

  • Outlines do not take up space
  • Outlines may be non-rectangular

Look at the following example. What you see in red color is the outline and what you see in black color is the border.

This div has an outline border 20px outside the border edge.
[code language=”css”] div{
border: 2px solid black;
outline: 2px solid red;
outline-offset: 20px;

So this is all the basic information we have to give you in CSS3. We guess now you can build a cool web page using the tips and tricks we had given to you with all these 12 sections. We’ll come back with another amazing tutorial. So till then stay tuned… Keep in Touch!!



Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply
  1. It’s actually a cool and useful piee of information. I’m
    happy that yyou just shared this helpful information with us.
    Please stay us informed like this. Thank youu for sharing.

  2. This is really interesting, You are a very skilled blogger.
    I’ve joined your rss feed and look forward tto seeking more
    of yoiur great post. Also, I’ve shared you web site in my social networks!

Comment Below