Geekly Articles each Day
📜 ⬆️ ⬇️

Create rounded corners with CSS 3

image

One of the most expected CSS3 properties is undoubtedly the border-radius property. With the help of the border-radius property, it is possible to create such popular recently rectangles with rounded corners, using only CSS, without using any images.

Crossbrowser compatibility.


Unfortunately, CSS3 is not yet supported by all browsers. The border-radius property is supported by Firefox (since version 1.0), Safari (from version 3.1) and Chrome (from the very first version), but it is not supported by Internet Explorer and Opera (will be implemented in Opera 10).

Since CSS3 is not yet a standard, you must add a prefix to the border-radius property for it to work in browsers that support it. If you want it to work in Firefox, you must write in the styles -moz-border-radius, for Safari / Chrome this property will look like this -webkit-border-radius.
')
Keep in mind that while Firefox, Safari and Chrome support this feature, they implement it in slightly different ways. I will first show you how it is implemented by Firefox and then explain the differences in Safari and Chrome.

To begin with, we will create a simple block, for which we will use the border-radius property.
<body>
<div id="box"></div>
</body>

In CSS, set the height, width, and background color for it:
#box {
width:590px;
height:100px;
background-color:#6B86A6; }

Add the border-radius property:


The border-radius property is declared like the margin and padding properties. You can use a brief recording of this property for all four corners of a rectangle, or separately for each corner. A brief entry indicates one value for each angle:
#box {
-moz-border-radius: 20px;
}

Now all four corners will have a radius of 20px:
image

You can also specify two values, the first of which will define the radius for the upper left and lower right corner, and the second for the upper right and lower left:
#box {
-moz-border-radius:20px 40px;
}

image

If you specify three or four values, they will be applied in the following order — upper left corner, upper right corner, lower right corner, and lower left corner.
#box {
-moz-border-radius:10px 20px 30px 40px;
}

image

Declare the border-radius property for each corner


If you want to use this property for only one corner, then it is enough to add the appropriate ending to the property:

image

Horizontal and vertical radius


This property can also be used to create angles in the form of a quarter of an ellipse. To do this, add a second value for the desired angle:
#box {
-moz-border-radius-topleft: 30px 15px;
}
image

As you can see in the picture, the upper left corner has a slightly “sloping” view. This is because these two values ​​determine the horizontal and vertical radius, respectively. When a single value is used, the browser interprets it for both horizontal and vertical radius.

When briefly writing this property, the values ​​for the horizontal and vertical radius are separated by a slash:
#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

image

Using the border-radius property in Safari and Chrome.


Safari and Chrome use a slightly different syntax, the main difference is the use of the -webkit prefix, instead of -moz:

When using a short record, you must bear in mind that it can only be used when the values ​​for all angles are equal, if the values ​​are different, then you must specify the properties for each angle.

This code will not work in Safari and Chrome:
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}

The correct code will look like this:
#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}

Horizontal and vertical radius in Safari and Chrome.


In Safari and Chrome, you can also specify horizontal and vertical radius:
#box {
-webkit-border-top-left-radius: 30px 15px;
}

With a brief record, you can specify the horizontal and vertical radius for all corners of the rectangle only if these values ​​are the same for each angle. Also, no slash is required:
#box {
-webkit-border-radius: 30px 15px;
}

Examples

Source: https://habr.com/ru/post/66193/

More articles:


All Articles