Post
Ask Question

Create Different Image Borders Using HTML5

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.
  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Corner.aspx".
new.gif
 
webapplication.gif
 
Step 2: Add an HTML file to your web application.
  • Right-click on the Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Frame.html".
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. 
  • Right-click on the Solution Explorer.
  • Add-> Add New Item.
  • Add the style sheet.
  • Set the name of the style sheet is a "styleSheet.css".  
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. 
  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder is an "image".  
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


Similar Articles