Rounded corners. Rounded corners using CSS

size 200x200 pixels:

You can also make rounded edges only for the top or bottom corners of the element, or give each corner a different rounding radius - lots of room for imagination! Example:

BorderElement ( background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; ) .borderElement1 ( background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; )

But that’s not all: instead of simple round corners you can specify an elliptical rounding. To do this, you will need to specify two values ​​separated by a slash (for the horizontal and vertical semi-axes of the ellipse). Let's give an example on a block of 150x450 pixels:

BorderElement ( background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; )

You can mix the values ​​(i.e. use both regular and elliptical rounded in the same style), and you can also add a personal style for each corner using the appropriate properties:

• border-top-left-radius - for the top left corner;
• border-top-right-radius - for the top right corner;
• border-bottom-left-radius - for the bottom left corner;
• border-bottom-right-radius - for the bottom right corner.

The principle of rounding corners

The image below shows how corner rounding is calculated in CSS. So, if a single value is specified for the angle - for example, 20px - this means that the rounding will occur along a circle with a radius of 20 pixels. In the case where two values ​​are specified separated by a slash, for example, 30px/20px , the corners will be rounded along an ellipse. The first value in this case is the length of the horizontal semi-axis of the ellipse - 30px, and the second value is the length of the vertical semi-axis - 20px:

The CSS border-radius property is supported by all modern browsers.

CSS3 frame complements the ability to format element borders with properties that allow round the corners element, and also use images to design the borders of the element.

Rounded corners and picture frames

1. Rounding corners with border-radius

Browser support

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

The property allows you to round the corners of inline and block elements. The curve for each angle is defined using one or two radii defining its shape − circle or ellipse. The radius applies to the entire background, even if the element has no border, the exact position of the secant is determined using the background-clip property.

The border-radius property allows you to round all corners at once, and using the border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius properties you can round each corner separately .

If you set two values ​​for the border-radius property, the first value will round the top left And lower right corner, and the second - top right And bottom left.

Values ​​specified through / determine horizontal And vertical radii. The property is not inherited.

Options

Div (width: 100px; height: 100px; border: 5px solid;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px ;) .r4 (border-radius: 10px/20px;) .r5 (border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (border-radius: 10px 20px 30px 40px/30px;) .r7 ( border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 (border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;)
Rice. 1. Examples of various options for rounding block corners

2. Border-image

Browser support

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

The property allows you to set an image as the element's frame. The main requirement for the image is that it must be symmetrical. Property includes following values: (border-image: width source slice repeat outset;) .

With the help of this simple image You can get these frames for an element.

/* Example 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Example 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30; border-image-repeat: round);
Rice. 2. An example of designing block boundaries using an image

Cuts A - B - C - D form the corners of the frame, and the part of the image located between them fills the remaining space of the frame in accordance with the specified value of the border-image-repeat property. Corner size (in in this example this is the number 30) is specified using the value of the border-image-slice property.

2.1. border-image-width

The property specifies the width of the image for the element's border. If the width is not specified, it defaults to 1.

border-image-width
Values:
length	Sets the border width in length units - px / em . You can set from one to four values ​​at a time. If one value is specified, then the width of all sides of the frame is the same, two values ​​specify the width of the top-bottom and right-left, etc.
number	The numeric value by which the border-width value is multiplied.
%	The width of the element's border is calculated relative to the size of the image. Horizontal relative to width, vertical - relative to height.
auto	Corresponds to the border-image-slice value.
initial
inherit

Syntax

Div (border-image-width: 30px;) Fig. 3. An example of setting the width of an image frame using various types values

2.2. border-image-source

The property specifies the path to the image that will be used to decorate the borders of the block.

Syntax

Div (border-image-source: url(border.png);)

2.3. border-image-slice elements

The property determines the size of the image parts used to define the borders of the element and divides the image into nine parts: four corners, four edges between the corners, and a central part.

Values:
number	The size of the frame parts can be set using one, two, three or four values. One value sets the borders to be the same size on each side of the element. Two values: the first determines the size of the top and bottom borders, the second - the right and left ones. Three values: the first determines the size of the top border, the second - the right and left, and the third - the bottom border. Four values: Defines the sizes of the top, right, bottom, and left borders. The numeric value represents the number of px.
%	Border sizes are calculated relative to the image size. Horizontal relative to width, vertical - relative to height.
fill	The value is indicated along with a number or percentage. If specified, the image is not cut off by the inner edge of the frame, but also fills the area inside the frame.
initial	Sets this property to its default value.
inherit	Inherits the value of this property from the parent element.

Syntax

Div (border-image-slice: 50 20;)
Rice. 4. An example of specifying image frame slices

2.4. border-image-repeat

This property controls how the background image fills the space between the corners of the frame. Can be specified using either a single value or a pair of values.

Syntax

Div (border-image-repeat: repeat;) Fig. 5. Example of repeating the central part of an image frame using different types of values

2.5. border-image-outset

The property allows you to move the image frame beyond the borders of the element by a specified length. Can be specified using either one or four values.

Syntax

Div (border-image-outset: 10px;)
Rice. 6. An example of shifting an image frame using different types of values

3. Outer frame offset outline-offset

The property specifies the distance between the border element's border and the outer border created using the outline property.

/*Figure 1:*/ img ( border: 1px solid pink; outline: 1px dashed gray; outline-offset: 3px; ) /*Figure 2:*/ img ( border-width: 1px 10px; border-style: solid; border-color: pink; outline: 1px dashed gray; outline-offset: 3px;
Rice. 7. An example of decorating an image with an outer frame

4. Gradient frame

The value of border-image can be not only an image, but also a gradient fill.

Translucent frame

One of the colors is transparent . In this way, you can set boundaries for all sides of an element at once or separately for each side. The thickness of the border is controlled by the border-width property.

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; background: #00E4F6; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent ; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%);

Postal envelope

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px )

Rounded corners in CSS can be done in many ways, very many, and some of them can be considered outdated, since CSS 3 introduced new properties that allow you to round the corners of HTML elements. However, firstly, old browsers do not support these properties, and secondly, such ideas are sometimes born in the creative brain of a designer that only the old methods can save. Therefore, here we will look at several different options for creating rounded corners in CSS: from the simplest to quite complex.

In these examples, the corners of the initially block elements are rounded, and in some examples these blocks are used as auxiliary elements. But remember that you can easily do the same with line-level elements, giving them a value of block or inline-block if necessary.

Rounded corners in CSS 3 without images

This example uses properties from CSS 3 that allow you to easily round corners without the aid of images.

HTML and CSS Example: Rounding Corners with using CSS 3 no images

Description of the example

1. To round corners, we use the CSS 3 property, which is understood by all modern browsers.
2. For old people Firefox browsers, Chrome and Safari use special properties with the prefixes -moz- and -webkit- , which appeared before they supported the main property. Unfortunately, there are no similar analogues for old Opera and IE. Please note that when creating complex curves, properties with prefixes may not work correctly. That is why in the CSS code they were listed higher than the main property, so that according to style priorities, browsers that already understand "pure" used it.

Properties with prefixes are not in the CSS specification, so using them will result in invalid code.

Rounded corners in CSS without images

This example also does not have images, but uses additional blocks. The essence of the method is that before and after the main content, several blocks are indicated, which, as they move away from it, gradually decrease in width using lateral external margins. Thanks to this, the imitation of rounding corners occurs.

This method is bad because the code is “littered” with additional blocks, but, unfortunately, in many examples such blocks will be present. Another disadvantage is that with large radii of curvature you will have to add even more blocks than are used in the example.

HTML and CSS Example: Rounding Corners Without Using Images

Description of the example

1. Inside the block with class = "block" we indicate an element for the main content ("content_block") in front of which we place blocks to simulate rounding of corners ("b1" , "b2" , "b3" ). After it we put them the same, but in the reverse order.
2. We set the simulation blocks to the required height and side margins (CSS) to create the appearance of corners. We also reset their font size (CSS) and set it to :hidden - this is intended for older browsers that may increase the height and make it larger than specified.
3. In this example, in addition to rounding the corners, an imitation of a frame was also added; if you don’t need it, then simply remove all the “borders” from the elements, and remove the background color from the “b3” block.

The easiest way to make rounded corners appear in CSS is to use an image as the background for the element. In this case, the dimensions of the element are usually specified the same as the size of the background image. The disadvantage of this method is that the content of the element should not extend beyond its scope, that is, it should be of a certain limited size.

HTML and CSS example: Rounding corners using one image

Description of the example

1. Using the CSS property, we set a background image for the block, which we prohibit from replicating vertically and horizontally (no-repeat), since in this case this is not required.
2. To prevent the text inside the block from touching its edges, we set its padding (CSS) to 5px on each side.
3. Next, you need to set the block to the same dimensions as the background. Our background image has dimensions of 140x32 pixels, but we specify the width ( CSS ) and height ( CSS ) for the block itself, reduced by 10px. I had to reduce it because of those same internal paddings, which also expand the element by 5px in each direction.

In the previous example, the block size was fixed and depended on the size of the background image, and this is very inconvenient. Now we will make the width of our block resizable. To do this, cut out three parts of the image - the sides and a piece of the center. Then we will place two elements with fixed sizes inside the main block, which, thanks to absolute positioning, will be placed on its sides. Let's give them the same side parts as the background, and the central part for the main block. This will give us a block with rounded corners and a variable width.

This technique is very often used to round off single-line elements, such as links or section/menu titles.

HTML and CSS Example: Rounding Corners Using SideBlocks

Description of the example

1. Inside the block class = "block" we place two elements - "left_bok" and "right_bok", to which we set images of the side parts as the background (CSS) and prohibit their reproduction (no-repeat). For the main block itself, we set the background from the central part and allow it to be duplicated only horizontally (repeat-x).
2. We specify the width for the side blocks corresponding to the size of the background; for us it is 14x32 pixels. But for the main block, as in the previous example, we set the height to 22px to compensate for the vertical padding.
3. We will position our sidewalls relative to “block”, so we specify :relative for it, and absolute for the sidewalls themselves. Well, then we press them to the corresponding sides of the parent using the CSS properties , and .
4. To prevent the contents of the block from being hidden under the side images, we set “block” to have side padding (CSS), which can be equal to or slightly larger than the sides themselves. We also set small margins at the top and bottom so that the text does not “stick” to the edges.

In IE6 there is a small bug with this method:

If the width or height of “block” is odd, then an unpleasant 1px indentation will appear between the inner edge of the block and the right positioned sidebar, which will spoil the whole picture. This bug can be fixed by using CSS hack with a certain expression, but I won’t even give such an example here, since it often freezes the browser and it’s better not to use it.

Let's do it differently. Let's set the "right_bok" left margin (CSS) to 100% so that it moves beyond the right border of the main block, and then return it back, moving it to the left by a number of pixels equal to its width. IE6 works correctly with the values ​​of these properties, so it has no choice but to place the block where we need it.

This method of rounding corners is similar to the previous one, but unlike it, here it is not HTML elements that are placed on the sides, but those added to the main block pseudo elements. Thanks to this approach, it was possible to get rid of the unnecessary HTML code of the page.

HTML and CSS Example: Rounding Corners Using Side Pseudo-Elements

Description of the example

1. Using CSS pseudo-elements we indicate that we want to add something to the beginning and end of the main block. And, using the CSS property, we just add the necessary images of rounded corners, or rather sides. So we created two pseudo-elements with images.
2. Well, then we do exactly the same thing as in the previous example, only we work with the created pseudo-elements.

For IE6 and IE7, the following "crutches" were used in this example:

1. As you know, IE6 and IE7 do not understand the pseudo-elements used here, so we do the following. We use expression, which integrates two tags inside the main element, and we give them the same styles as in the previous example. Note that the injected code that comes after the first innerHTML is added immediately after the opening "block" tag, and after the second innerHTML it is added before the closing tag. Yes, in our case this does not matter, since absolute positioning is used, but sometimes it is useful to know about it.
2. To prevent this code from being seen by other browsers, we enclose it in conditional comments. It would be better if you put it in a separate CSS file, which is connected with a tag closed with the same comments.

Rounded corners in CSS using block wrapping

The essence of this method is that first the corners of the image are cut out. Then several more blocks (according to the number of corners) are placed inside the main block, which are nested inside each other. Each of them is given one image corner as a background. Images are prohibited from reproducing and coordinates are given so that they take places at the corners of the blocks. This is how the effect of rounded corners is obtained.

HTML and CSS Example: Rounding Corners Using Block Wrap

Description of the example

1. We place four more inside the main block. Since none of these blocks have margins or borders, and only the innermost one has indents, they are all equal in height and width.
2. Using the CSS property, we set each of the inner blocks to a corner as a background, prohibit them from reproducing and position them at the corners of the blocks. And since the background color of the elements is transparent, all four background corners are visible on the page.
3. Add it yourself external unit with a corner of the desired background color. Everything is ready.

You can explicitly set the block width by specifying the desired property in class="block" , but to change the height you must use the innermost element (for us it is "rb").

Rounded corners in CSS using positioning

Here, too, corners are cut out for the background, which will be indicated on the small blocks. Using CSS absolute positioning, these blocks are placed at the corners of the main element, which is given the desired background color.

HTML and CSS Example: Rounding Corners Using Positioning

Description of the example

1. Inside the main element (class= "block") we place four tags with the classes "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , which will act as corner blocks.
2. Using the CSS property, we connect our own background image to each corner block and set their width and height to be equal in size to these background images. Just in case, we reset the font size (CSS) and trim off the excess (CSS).
3. We specify relative positioning for the main element (CSS:relative), since we will position the corner blocks relative to it, and for the corners themselves - absolute (absolute).
4. Using the CSS properties , and , we specify vertical and horizontal offset distances for the corner blocks so that they are located at the corners of the main block.

There are a couple of problems with this method in IE6:

1. If the width of "block" is not explicitly specified, then the corners on the left will not fall into place. The reason for this is the presence of internal padding in the block. The easiest way to fix the problem is to remove the indentation and enclose the main content of "block" (without corners) in an additional block wrapper, and then specify the required indentation at the wrapper. But I did it differently here by enabling the layout using the zoom:1 property, which tells IE6 to display the element at its natural size. This property is invalid, so if you decide to use it, I recommend that you make the connection via conditional comments.
2. The same one-pixel bug that was discussed above. But here gaps can form not only between the right corners and the right side of the block, but also at the bottom. And if we got rid of the gaps on the right, then this will not work with the bottom ones. The solution is to explicitly specify an even width and height of the main element. You can also set odd values, but then you will need to set the downward and right offset distances to be not zero, but -1px.

Essentially, the technology for this method of rounding corners in CSS is the same as the previous one, so detailed comments will be omitted here. The only difference is that instead of separate background corner images, one common sprite image is used here. Thanks to this, the site loads faster, because one image “weighs” less than four and hosting there is one appeal instead of four.

A sprite is an image that combines several images used as a background for website elements. Which part of the sprite will be the background of a particular HTML element depends on the coordinates specified in a special CSS property.

HTML and CSS Example: Rounding Corners Using Positioning and Sprites

Description of the example

1. Using the CSS property, we connect a background sprite image to the corner blocks, which has a round shape with dimensions of 22x22 pixels (11x11 pixels for each quarter-corner).
2. Using the CSS property, we specify the background offset coordinates. For example, a value of -11px 0 means that the background will be offset to the left by 11px on the X axis, but not offset on the Y axis. Thus, the left half of the sprite goes beyond the border of the element and only the right remains. But it is only half visible, since its height is 22px, and the height of the corner block itself is only 11px. So it turns out that when given value The background of the element will be the upper right quarter of the sprite.

With IE6 there are the same problems as in the previous example.

In this example, we will round the corners of an element that has a border, but this is not a specific feature of this particular method - you can easily use a rounding with a border in the previous examples.

We will make the roundings themselves using pseudo-elements created from the main block, but without applying positioning to them.

And one more thing. In the previous examples, the corners were cut out along with the background inside, and this is not always necessary, especially if it is expected that the background of a block with rounded corners will be non-uniform. Therefore, the background inside the frame here was made transparent (this allows PNG format) and when the corners were cut out, their inside also turned out to be transparent. If necessary, you can also use a similar approach in the previous examples.

HTML and CSS Example: Rounding Corners Using Pseudo-Elements

background , and with the help of it we position them to the right side and prohibit “reproduction”. That's it, the corners are ready.

Since we specified padding for “block” (CSS), the pseudo-elements, and therefore the corners, are not located at the corners of the block, but are 15px away from the edges. To fix this, we give the pseudo-elements negative margins (CSS) on the necessary sides to position them on top of the indents. But we make the margins equal not 15, but 17px, this is necessary to cover the frame (CSS), the width of which is 2px (15+2=17). That's it now.

For IE6 and IE7, we used the already familiar "crutches" with the injection of HTML code here, since these browsers do not understand the pseudo-elements used here:

1. Using expression, we integrate two tags inside the main element, which we also convert into blocks. Then we place one tag in them. And then these tags have the same properties as pseudo-elements. The only thing is that we additionally add the CSS property :relative, without which the frame overlaps the corners.

The disadvantage of this method is that you cannot explicitly set the height of a block with rounded corners, because if it exceeds the size of the content, then the lower corners will not be pressed against the edges. This can be avoided if you still enclose the main content in another block and set its height.

Another example of rounding corners with pseudo-elements and without additional blocks

This example is similar to the previous one, but here we use positioning to arrange the pseudo-elements. Thanks to this approach, it became possible to explicitly specify the height of a block with rounded corners.

HTML and CSS example: Rounded corners where you can change the height of the block

And again, for IE6 and IE7, we add several additional elements inside the main block using expression, and close the code in conditional comments. Only this time we won’t even try to emulate pseudo-elements, but will do it simpler.

1. We add four tags inside “block” and apply positioning to them. And then we simply show them the image corners as a background and place them in the corners of the main element. That is, we act exactly as in one of the methods discussed above.
2. To get rid of the one-pixel bug (which was mentioned more than once above), add a left margin (CSS) with a 100% value and a negative offset equal to -9px to the right corner elements. In general, if you remember, this offset should be equal to the width of the corner block (for us it is 11px), but do not forget about the 2px border that we have here - we need to put the corners on top of it (11px-2px=9px).

By the way, in fact, it would be easier to emulate pseudo-elements, as we did in the previous example - like this extension code would be smaller. But not in IE6, this browser would need several more “crutches” and, as a result, would have to write two separate conditional comments- for IE6 and IE7, and this would only bloat the code...

In Firefox, this method works correctly from version 3.6, and in Opera - from version 10.0, I did not come up with crutches for them, since this is of little relevance.

Greetings, Friends. This article is devoted quite popular topic among novice webmasters - rounded corners CSS. The questions that I will try to answer will concern how to do rounded corners site elements using only CSS without resorting to the use of any images.

IN this method there are both pros and cons. The advantages, of course, are that there is no need to create images using any graphic editor, upload them to the server, and then arrange them using CSS in the necessary places to create desired effect. In this case, it is necessary to create additional elements in the HTML code, as well as specify separate properties for each of them.

As for the minuses, one problem can be noted here - this property is not supported by all web browsers, especially for outdated versions various browsers.

However, rounding corners using CSS is becoming more and more popular. As you may have already understood, in this article we will use a property available in CSS 3.

Rounded corners using CSS.

So for example we will take block element DIV and make its corners rounded. For example, let's create a block and assign properties to it directly in the HTML code using the style attribute. First we have a block element filled with a background of any color:

By the way, if you need to find out what color code you have on your website or on any other website, this will come in handy.

And this is how we will see it in a web browser:

Now, to round the corners, we will use the “border-radius” property, which can be translated as the radius of the border. Yes, exactly like that, and not as many might think, that this is the radius of the frame or whatever they call it (border). This property is responsible specifically for the radius of the element’s borders, and not for its frames or borders, which may not exist. However, the property will still work without using a border on the element. I hope you understood what I wanted to say. The value for this property is any numeric value that is applicable in CSS, such as percentages, pixels (px), points (pt), and so on. Yes, and it should be taken into account that this property works on all four corners of the element at once; in addition, you can specify a different radius for each corner, but more on that later. First, let's set the radius of the corners of our rectangle. Let it be equal to 5 pixels:

Then the element will look like this:

Now, I propose to figure out how to add your own radius for each corner separately. To do this, we can use a property that can be applied to each angle separately. If we talk about the previous example, then in full form the properties for the element would look like this:

Border-top-left-radius:5px; /* top left corner */ border-top-right-radius:5px; /* top right corner */ border-bottom-right-radius:5px; /* bottom right corner */ border-bottom-left-radius:5px; /* bottom left corner */

That is, if we want to set each corner to its own value, we have this opportunity, and to make sure of this we take the following code:

And then we get this result:

As we can see, the border of each corner has its own radius value.
Additionally, CSS allows us to set a value for the border of each corner as a short entry that looks like this:

Where the values ​​will follow in this order:

Border-radius: 5px /* top left corner */ 10px /* top right corner */ 15px /* bottom right corner */ 20px /* bottom left corner */;

Accordingly, based on the above, it becomes clear that in the same way we can set the radius boundary only for three (one or two) corners:

This is what it looks like in a web browser:

If you are not completely confused yet, then let's continue. The fact is that the radius for each corner boundary can be specified not in one value, as we discussed above, but in two. That is, two values ​​for each angle. In this case, the first value will set the radius for the corner horizontally, and the second value will set the radius vertically. Let's start with one corner first:

In this example, we affected only the upper left corner of the element:

If you reverse the values, then the element will look like this:

It seems like it could have ended there, but no. There is one more trick. In a property value, we can use a slash (/) between values. The slash can help us combine values ​​with other values. In general, it is easier to show than to tell. Let's start with something simple. Let's assume that we need the horizontal radius to be 35 pixels and the vertical radius to be 5. Moreover, these values ​​should apply to all corners. Then we can write like this:

And get this result:

Now let's look at a more complicated example:

In this case, the value before the slash sign (/) will relate to the horizontal radius of the corner, and after the sign to the vertical one. In this case, the values ​​will relate to each other in this way:

Border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;

And the result will be like this:

And at the end of the article, we’ll talk about the support of this property by various browsers.

Rounding corners in various web browsers.

It is worth noting here that this property is not supported by all browser versions. The property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.
But for some browser versions that do not support this property, there are non-standard properties that add a so-called prefix or prefix to the property.
Chrome before version 4.0, Safari before version 5.0, iOS use the non-standard property -webkit-border-bottom-left-radius.
Firefox before version 4.0 uses the non-standard property -moz-border-radius-bottomleft.
In this case, we will have to duplicate the property using these prefixes. For example, if we set the property for the border of the upper left corner to a value of five pixels:

Border-top-left-radius: 5px;

Then the property, duplicating it using prefixes, will look like this:

Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;

I really hope that I was able to explain everything clearly and that you now understand how to make rounded corners using only CSS.
Good luck to you!

note that CSS styles for a given figure are entered into the file once, and the HTML tag can be placed on the site an unlimited number of times.

As a result of the output we get the following rectangle with frame.

How to Make Rounded Corners in CSS

The attribute is used to round corners border-radius.

We could add just this attribute. It normally displays the rounding result in new versions of browsers, but many users still have older versions where this attribute does not work correctly. Therefore, for compatibility, we will add a few more descriptions of this attribute, which is tied directly to certain browsers, into our block in the Style.css file, resulting in the following code:

The HTML div tag will give us rectangle in frame with roundedand corners:

and the HTML tag for displaying the text will look like this:

pib9.ru

We get rounded rectangle and text:

If you remove the rectangle size description attributes from the code width And height, then you can get the following shapes with rounded corners:

1. No text

In this case, the forms take on the dimensions of the environment: the length corresponds to the width of the field, and the height changes as the form is filled with content.

Round selected corners

In the style description, the 10px parameter in the attribute border-radius shows the radius of curvature, which can be changed by selecting the one you need. If set to 0, rounding will not occur. This property can be used when you need to round selected corners.

Let's write down the values ​​of the rounding radius for each corner, indicating zeros where we cancel the rounding. For example, let's cancel the rounding in the third and fourth corners. Our code will look like this:

1. Upper left corner.

2. Upper right corner.

3. Bottom right corner.

4. Lower left corner.

This results in a rectangle with selected curves only in the upper corners.

Angles are counted clockwise, starting from the upper left corner:

2. Rounding corners using HTML code without writing to a style file

Consider the second method of obtaining a rectangle with rounded corners with using HTML code without writing to a style file.

HTML rounded corners

There is one small feature that simplifies the whole process even more - this HTML rounded corners. It consists in generating HTML code, which contains the same styles as in CSS codes. This uses the same attributes as in the CSS block and eliminates the need to write the block to the Style.css file. In a word, we completely replace the CSS code with HTML code.

Instead of our CSS block, we get an HTML script, which we insert into the place where the rectangle with rounded corners should appear:

The first method of rounding corners can be used when the same shape is used more than once without changing styles. The second method is used for forms whose styles are used once.

3. Pictures with rounded corners. Frame around HTML image

I also want to give you useful information. Often using pictures for website design, I really want to make them even more beautiful by changing their shape, framing them with a frame of a beautiful color and different widths. This raises the question: “ How to round the corners of a picture?”.

This is done very simply, and now we will learn how to do it.

Let's place the image on the site, making it its own background as the background of the div tag. We get the following code and image:

Rounding the corners of the picture by adding a frame

Rounding the corners of images in CSS and HTML and adding a border can be done in one of the two ways described above.

Using the first method in this article, the image codes for the stylesheet file and the HTML div tag will look like this:

Please note that some attributes can be entered into the style file, and some into the div tag. In our case, the image dimensions width and height are inserted into the HTML code.

The HTML code of the second method, without using the style file described in this article, looks like this:

As a result of the codes of each of the two methods, we get the same result - a picture with rounded corners: