ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

19-CSS Rounded Corners

Here in this tutorial, you will learn about the property of making the box rounded at corners so that the boxes could become more elegant and attractive using CSS Rounded Corners.This helps in enriching the HTML webpage.

 

Here I have put an example to demonstrate the above saying

Example 1:

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #rcorners1 {
  6.     border-radius: 28px;
  7.     background: yellow;
  8.     padding: 24px;
  9.     width: 220px;
  10.     height: 180px;    
  11. }
  12.  
  13. #rcorners2 {
  14.     border-radius: 28px;
  15.     border: 2px solid #73AD21;
  16.     padding: 24px;
  17.     width: 220px;
  18.     height: 180px;    
  19. }
  20.  
  21. #rcorners3 {
  22.     border-radius: 28px;
  23.     background: url(crown.gif);
  24.     background-position: left top;
  25.     background-repeat: repeat;
  26.     padding: 25px;
  27.     width: 220px;
  28.     height: 180px;    
  29. }
  30. </style>
  31. </head>
  32. <body>
  33.  
  34. <p><h3>The border-radius property gives  you to add rounded corners to elements</h3>.</p>
  35. <p>Rounded corners for an element with a particular background color mentioned in the above code:</p>
  36. <p id="rcorners1">Rounded corners!</p>
  37. <p>Rounded corners for an element with a border:</p>
  38. <p id="rcorners2">Magic begins -Rounded corners!!!</p>
  39. <p>Rounded corners for an element with a particular  background image:</p>
  40. <p id="rcorners3">here too yo can see Rounded corners!</p>
  41.  
  42. </body>
  43. </html>

You can even make elliptical borders shown in the below code

Example 2:

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #rcorners8 {
  6.     border-radius: 60px/20px;
  7.     background: green;
  8.     padding: 18px;
  9.     width: 220px;
  10.     height: 180px;
  11. }
  12.  
  13. #rcorners9 {
  14.     border-radius: 20px/60px;
  15.     background: yellow;
  16.     padding: 18px;
  17.     width: 180px;
  18.     height: 160px;
  19. }
  20.  
  21. #rcorners10 {
  22.     border-radius: 45%;
  23.     background: yellow;
  24.     padding: 18px;
  25.     width: 220px;
  26.     height: 180px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31.  
  32. <p>Elliptical border - border-radius: 60px/20px:</p>
  33. <p id="rcorners8"></p>
  34.  
  35. <p>Elliptical border - border-radius: 20px/60px:</p>
  36. <p id="rcorners9"></p>
  37.  
  38. <p>Ellipse border - border-radius: 40%:</p>
  39. <p id="rcorners10"></p>
  40.  
  41. </body>
  42. </html>

This way you can make different borders by changing their dimensions.

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!