While working on many websites and scripting languages, you may have gone through many situations when you have encountered the rounded edges or corners of some elements or images. Many developers and programmers used to style the images or elements of HTML to make their web pages more aesthetic and appealing. The HTML CSS styling came up with these concepts as well. It provides us with the border radius property along with different padding, width, and height properties to round the edges of some elements. In this article, we will be taking a look at these properties that make a web page more appealing.

Example # 01:

Let’s round the edges of any images or some paragraphs. We have started the HTML code with the use of the HTML basic tag followed by the head tag. The head tag contains the title tag that has been used to give a title to the webpage as “ CSS rounded edges or corners”. Within the body tag of the HTML document, we have been using a heading of size 1 that will not be used to round the corners. Three paragraphs have been used by the utilization of the paragraph tag “p”.

The first two paragraphs have been specified with 2 different classes: a and b. The third paragraph has been specified with the ID “c”. All these three paragraphs contain sentences that could be used as the content of the paragraph. These paragraphs can be displayed with rounded edges on the HTML page. Let’s take a look at the CSS of this page. Within the style tag of this HTML script, we have specified the classes a and b for the first two paragraphs to separately style both of them while the ID “c” is being used with the hash sign to be styled separately.

We have been using the border radius property for first class “a” to add the radius of 25 pixels and the background would be colored, sky blue. The border radius property has been used for the second class as well to add the border radius of 45 pixels with two pixels solid border around it. For both the first classes we have been using 20-pixel padding 200-pixel width and 50-pixel height. On the other hand, the third paragraph id has been used to add the radius of 90 pixels around it.

Using the background property, an image has been added as the background. Along with that, the background position property has been used to position the background of an image and the background repeat property has been set to repeat. Due to the use of this property, the background image can be repeated as many times as possible. The padding, height, and width would be quoted the same, as we used in the above two stylings for paragraphs. The code is now completed and we can run it on the Visual Studio code via the “Run” menu of its taskbar followed by the “start debugging” option.

The output of this HTML code has been displayed on the Chrome browser as below. The first two paragraphs have been styled within the border radius of 25 pixels and 45 pixels respectively. Both the paragraphs contain different backgrounds with quite the same padding, width, and height. You can see that the edges of both the paragraph’s radius have been rounded.

Also, the third paragraph has been displayed within the circle radius of 90 pixels while the image used as a background has been repeated many times.

Example # 2:

We have to initialize this example with the main HTML tag and the head tag. The title tag has been used to give the title to this HTML page as “CSS rounded edges or corners”. While taking a look at the body tag of this HTML script, we found a single heading of size 1 with a simple text title in it. This HTML page contains a total of 5 paragraphs with the use of paragraph tags or elements. The first paragraph is showing that this will be containing a border radius of 50 pixels and the eclipse shape would be formed.

The second paragraph is using nothing but an ID “eclipse”. All the other three paragraphs contain their own specified classes: four, three, and two, along with some sentences showing the border-radius values used for the creation of different eclipses for particular paragraphs. These paragraphs would be showing the total number of corners that are being rounded. The ID “eclipse” for the first paragraph has been used to style the first paragraph in an eclipse. We have been specifying the border radius of 50%, background of yellow green color, padding of 10 pixels, the width of 110 pixels, and height of 50 pixels for the first paragraph. Then, we have been using the class of the third paragraph, “four”, to round the four corners of the paragraph. For this, we have been using the border radius property for the top, bottom, left, and right edges of the paragraph. We have specified the background as burlywood, with padding of 15 pixels, a width of 200 pixels, and a height of 40 pixels.

This means all the four corners or edges of the third paragraph would be rounded. For the fourth paragraph to be styled by the class “three”, three of its corners or edges would be rounded while the one would be left unchanged. The background has been specified as gold while the padding, width, and height would be the same as we have used for the third paragraph. We have been using the class “two” for the fifth paragraph to round its two corners. The same padding, width, and height would be used while the color would be different for this paragraph. The first paragraph would not be displaying any rounded edges because it doesn’t contain any styling for it. Let’s save this HTML script and execute it with Visual Studio code via the start debugging option.

The output of this HTML program has been showing that the first paragraph does not contain any rounded edges because we have missed the styling of this paragraph. On the other hand, all the four paragraphs have been styled and we have got rounded edges for all of these.

Conclusion

This is all about the use of the border radius property to round the edges of any HTML element within the HTML script. For this purpose, we have utilized the html examples in a very simple and exquisite way. With the first example, we have demonstrated the use of the border radius property to round all the edges of one element or image at once without specifying the edges. On the other hand within the second example, we have specified the use of different corners or edges to round these edges or corners accordingly by the use of different values.