Subscription by Email - news

Discard subscription

Rounded corners using CSS

viewsViews: 640         commentsComments: 0

Web developers are always looking for ways to make the user interface more attractive. CSS3, etc.edostavlyaet for this many new features. You can use your own fonts on the pages; create elements with rounded corners and shadows; use gradients in the background and even rotate the items so that they do not seem so monotonous and geometrically correct. All this is done without the use of Photoshop and other caficheskih programs. To begin, you will learn how to round off the sharp edges on the form.

This article discusses the following features CSS3:
border-radius [border-radius: 10pxj] Rounding corners elements.

Rounding angles

On the Web, all elements of the default IMEare rectangular in shape. Form fields, tables, and even sections of the web — they all have a rigorous, geometrically correct view. Over the years, many web designers have used various methods of corners elements to soften the interface.

In CSS3 adds support for simple and convenient corners, which havesame for a long time supported in Chrome, Firefox and Safari. In Internet Explorer 9, this support also came, so now the problem is solved without much hassle. Let's see how this is done.

Rounded corners   at   form   vhodaVam need to create a new form of entry for the site. Form fields must be rounded yrLamy. Let's start with the implementation of this effect solely by means of.

Log   in

The application form for a little style to improve its appearance:

stylesheets / style.css

. login {
    width: 250rh;

. login fieldset {
    background-color: #ddd;
    border: none;

. login legend {
    background-color: #ddd;
    padding: 0 64px 0 2px;

. login ol {
    list-style: none;
    margin: 2px;
    padding: 0;

. login li {
    margin: 0 0 0 9px;
    padding: 0;

. login input {
    background-color: #fff;
    border: lpx solid #bbb;
    display: block;     width: 200px;

. login input [type = "submit"] {
    background-color: #bbb;
    padding: 0;   width: 202rh;

These styles are removed from the list of tokens and provide equality sizes text fields. You can also make changes to the tags and groups to form fields. When the basic design is complete, you can begin to use effects zakrugtion.

To round the corners of all text form fields will need a CSS rule of the form:

stylesheets / style.css

. login inputl. login fieldset,. login legend {
    border-radius: 5px;

Turn it into a file style.css, — angles and text fields will be rounded smoothly.

The above solution works in Firefox, Safari, Chrome and Internet Explorer 9 and 10, but not in Internet Explorer 8, and therefore, it is necessary to implement as much as possible close analog. The problem is solved completely trivial using the library PIE, which provides instant subtreeHCS border-radius and a number of other functions. Download PIE, unzip the file and place the file a folder stylesheets.

Before we get to the curvature, it is necessary to get rid of a stylistic errors. Internet Explorer processes the tag   a special way, so that when viewed in the form we see IE group header at « spine & raquo ;; it is completely located within the set of fields. We add a small « patch » for IE, which shifts the group header for a few pixels up — where it is displayed in Firefox and Chrome. Create a new file named stylesfieets / ie.css and include a link to it in a conditional comment that it zagruzhalass only in IE 8 and below:


Then fill in the stylesheets / ie.css amendments to   legend   and fieldset:

stylesheets / ie.css

. login {
    margin-top: 20px;

. login fieldset legend {
    margin-top: -10px;
    margin-left: 10px;

. login   fieldset {
    padding-left: 10px;

The group fields displaced by 20 pixels down and the group header — 10 pixels up. Also, the title moves to the right, but because of the styling features of the default Internet Explorer need to add a small indentation in the group itself fields. Now that the form looks the same as in other browsers.

Finally, we load PIE using the   behavior — Special rules for CSS, supported by Internet Explorer:

stylesheets / ie.css

. Login fieldset,. Login input,. Login legend {
    behavior:   urL (stylesheets /;

Note: file is stored in the     stylesheets. Link to in our style sheet should be set relative to the page HTML, which loads the stylesheet, and not in relation to itselfFirst tablitsy.Teper in all major browsers result looks the same.

In our example, requires that in all browsers corners were rounded. However, such opportunities should always be left to the discretion of the user. Although some would say that the « softening » the appearance of the form brings real benefits to start is requiredto estimate how many people are working in browsers without the support of curvature means   CSS. If your visitors are using Internet Explorer 9 and above, you may simply not worth wasting time on writing and maintenance of workaround.

Rounded corners visually « soften » interface, and use them chrezvychayno easily. However, it is very important to a consistent approach to their use and not abuse this aspect of the design (as, indeed, any other).

0   (votes: 0)
Read more with:
Computer funds learning (CWS)
Computer funds learning (CWS)
##Informatin technology in education when playing through all the more state...
Views: 466 Comments: 0

To add comment, please, authorize.
Authorize using Yandex Google Twitter