• How to round corners in CSS and HTML. Rounding corners of pictures. Rounded corners using CSS

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

    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:

    Everyone has long been tired of traditional rectangular corners in website design. Rounded corners are in fashion, which are made not using images, but through styles, for which the border-radius property is used. This property can have one, two, three or four values ​​separated by a space, which determine the radius of all corners or each individually.

    In table 1 given different quantities values ​​and the type of block that is obtained in this case.

    Code Description View
    div ( border-radius: 10px; ) Rounding radius for all corners at once.
    div ( border-radius: 0 10px; ) The first value sets the radius of the top left and bottom right corners, the second value sets the radius for the top right and bottom left.
    div ( border-radius: 20px 10px 0; ) The first value sets the radius of the upper left corner, the second - both the upper right and lower left, and the third value - the lower right.
    div ( border-radius: 20px 10px 5px 0; ) Sequentially sets the radius of the upper left, upper right, lower right and lower left corners.

    Example 1 shows how to create a block with rounded corners.

    Example 1. Corners of a block

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Radius

    Me is the suppletive form of the accusative case of I.

    The result of this example is shown in Fig. 1.

    Rice. 1. Block with rounded corners

    An interesting effect can be obtained if you set the rounding radius to be greater than half the height and width of the element. In this case, you will get a circle. Example 2 shows how to create a round button with a picture.

    Example 2: Round button

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Button

    The result of this example is shown in Fig. 2.

    Rice. 2. Round button

    IN Opera browser rounding to

    Read more: