1. CSS Tutorial
  2. Border Radius

Border Radius

Submitted by Yorkiebar on Friday, January 24, 2014 - 08:41.
Introduction: This is the sixth part in my CSS Styling tutorials, in which I will be covering border radius. What is Border Radius: Border radius is a property within the border settings which allows you to change how curved the borders are. The radius sets the curve for the full border. Structure: border-radius: {Amount}{Measurement}; Example:
  1. border-radius: 5px;
Comparison: The bigger the border radius, the more curved the border will be.
  1. border-radius: 15px;
The above code will be a smoother curve than...
  1. border-radius: 5px;
Individual: You can also the individual corners border radius...
  1. border-top-left-radius: 2em;
  2. border-top-right-radius: 1em;
  3. border-bottom-right-radius: 4em;
  4. border-bottom-left-radius: 1em;
Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...
  1. class='myClass'
... to the attributes of that element if you chose a class, or...
  1. id='myID'
if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...
  1. .myClass {
  2.         //Properties go here
  3. }
if you chose a class, or...
  1. #myID {
  2.         //Properties go here
  3. }
(You can remove the line beginning with // if you wish). Here's an example...
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         .circle {
  5.                                 background-color: #000;
  6.                                 color: #fff;
  7.                                 width: 300px;
  8.                                 height: 100px;
  9.                                 border: 2px solid #000;
  10.                                 border-radius: 100%;
  11.                         }
  12.                        
  13.                         .rounded {
  14.                                 background-color: #000;
  15.                                 color: #fff;
  16.                                 width: 300px;
  17.                                 height: 100px;
  18.                                 border: 2px solid #000;
  19.                                 border-radius: 5px;
  20.                         }
  21.                        
  22.                         .block {
  23.                                 background-color: #000;
  24.                                 color: #fff;
  25.                                 width: 300px;
  26.                                 height: 100px;
  27.                                 border: 2px solid #000;
  28.                                 border-radius: 0px;
  29.                         }
  30.                 </style>
  31.         </head>
  32.         <body>
  33.                 <div class='circle'>Circle</div>
  34.                 <div class='rounded'>Rounded</div>
  35.                 <div class='block'>Block</div>
  36.         </body>
  37. </html>

Add new comment

About text formats
  • 114 views