Introduction

In this article, we will learn how to create various rounded corner frames using HTML5 and CSS tools. Now we will also learn how to set an image background in a corner frame using CSS. Let us start a small discussion of HTML; HTML is the acronym for "Hyper Text Markup Language" used for displaying data in a browser. HTML5 is an advanced version of HTML that is used to develop multimedia and animated applications. In another article we used some CSS; CSS is a "Cascading Style Sheet" that is used for design purposes in applications. In this article, we have created a four type frame and set different-2 images in the background. I hope this article helps to see how to create rounded corner frames using HTML5 and CSS tools. If you are interested in developing a rounded corner frame application then you should follow the steps given below.
Step 1: Open Visual Studio.
new.gif
webapplication.gif
Step 2: Add an HTML file to your web application.
css.gif
html.gif
Step 3: In this step, we add a CSS file named StyleSheet.css. In the CSS we set font-family, font-size, the color of rounded corner frame page.
css.gif
css2.gif
Code
  1. body, p, td, textarea
  2. {
  3. font-family: "Helvetica Neue";
  4. font-size: 20px;
  5. line-height: 20px;
  6. color:Blue;
  7. }
  8. body
  9. {
  10. padding: 20px;
  11. }
  12. h1
  13. {
  14. margin-bottom: 20px;
  15. }
Step 4: In this section we apply some CSS properties to set a background of a rounded corner frame.
Code
  1. .rounded1
  2. {
  3. border-width:30px;
  4. -webkit-border-image:url(image/dotttttttttt.jpeg) 30 repeat;
  5. -moz-border-image:url(image/dotttttttttt.jpeg) 30 repeat;
  6. border-image:url(image/dotttttttttt.jpeg) 30 repeat;
  7. }
  8. .rounded2
  9. {
  10. border-width:12px;
  11. -webkit-border-image:url(image/rounded2_line.png) 12 repeat;
  12. -moz-border-image:url(image/rounded2_line.png) 12 repeat;
  13. border-image:url(image/rounded2_line.png) 12 repeat;
  14. padding: 10px;
  15. }
Step 5: In this step, we add a folder named "image" that is used to store all images. Images used to set a background of a rounded corner frame.
folder.gif
image.gif
imageadd.gif
Step 6: In this section, we apply some CSS properties that are used to set a background of another rounded corner frame.
Code
  1. .rounded3
  2. {
  3. border-width: 30px;
  4. -webkit-border-image:url(image/images111111111.jpeg) 30 repeat stretch;
  5. -moz-border-image:url(image/images111111111.jpeg) 30 repeat stretch;
  6. border-image:url(image/images111111111.jpeg) 30 repeat stretch;
  7. padding: 10px;
  8. }
  9. .rounded4
  10. {
  11. border-width: 15px 20px 30px 30px;
  12. -webkit-border-image:url(image/images.jpeg) 15 20 30 30 repeat;
  13. -moz-border-image:url(image/images.jpeg) 15 20 30 30 repeat;
  14. border-image:url(image/images.jpeg) 15 20 30 30 repeat;
  15. padding: 10px;
  16. color: #fff;
  17. }
Step 7: In this section we set a content and color of a body.
Code
  1. <body bgcolor="#ffffcc">
  2. <h1>Tom Developed a Rounded Corners</h1>
  3. <div class="rounded1">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  4. <div class="rounded2">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  5. <div class="rounded3">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  6. <div class="rounded4">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  7. </body>
body.gif
Step 8: In this section we set a demo of a code rounded corner frame application that is given below.
Code
  1. <html>
  2. <head>
  3. <title>Tom Application</title>
  4. <meta charset="utf-8" />
  5. <link href="style.css" rel="stylesheet" type="text/css" />
  6. <style>
  7. div
  8. {
  9. margin-bottom: 30px;
  10. width: 400px;
  11. }
  12. .rounded1
  13. {
  14. border-width:30px;
  15. -webkit-border-image:url(image/dotttttttttt.jpeg) 30 repeat;
  16. -moz-border-image:url(image/dotttttttttt.jpeg) 30 repeat;
  17. border-image:url(image/dotttttttttt.jpeg) 30 repeat;
  18. }
  19. .rounded2
  20. {
  21. border-width:12px;
  22. -webkit-border-image:url(image/rounded2_line.png) 12 repeat;
  23. -moz-border-image:url(image/rounded2_line.png) 12 repeat;
  24. border-image:url(image/rounded2_line.png) 12 repeat;
  25. padding: 10px;
  26. }
  27. .rounded3
  28. {
  29. border-width: 30px;
  30. -webkit-border-image:url(image/images111111111.jpeg) 30 repeat stretch;
  31. -moz-border-image:url(image/images111111111.jpeg) 30 repeat stretch;
  32. border-image:url(image/images111111111.jpeg) 30 repeat stretch;
  33. padding: 10px;
  34. }
  35. .rounded4
  36. {
  37. border-width: 15px 20px 30px 30px;
  38. -webkit-border-image:url(image/images.jpeg) 15 20 30 30 repeat;
  39. -moz-border-image:url(image/images.jpeg) 15 20 30 30 repeat;
  40. border-image:url(image/images.jpeg) 15 20 30 30 repeat;
  41. padding: 10px;
  42. color: #fff;
  43. }
  44. </style>
  45. </head>
  46. <body bgcolor="#ffffcc">
  47. <h1>Tom Developed a Rounded Corners</h1>
  48. <div class="rounded1">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  49. <div class="rounded2">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  50. <div class="rounded3">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  51. <div class="rounded4">C# corner is a dynamic website with a single goal in mind to provide an online platform for Information Technology.</div>
  52. </body>
  53. </html>
Step 9: Press Ctrl + F5 to run the application in a browser.
Output
out.gif
out1.gif
out2.gif
Resources
Here are some useful resources