Rounding the borders of a block in CSS

Now we will learn how to round the corners of a block. To do this, you should use the border-radius property, which takes a value in pixels.

What does it mean that we specified a rounding of, for example, 10px? This is the radius of the circle that can be inscribed in this rounding. If you are not good at math and do not understand the last sentence - forget about it and just select the rounding by eye. With some experience, this is not a problem (there is no measuring tool for measuring roundings, at least I have not heard of one).

Let's round the corners of the block by giving it a rounding of 10px:

<div id="elem"></div>

#elem {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px;
}

Repeat the page according to this example: