Border Radius

Submitted by: 

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.

border-radius: {Amount}{Measurement};


  1. border-radius: 5px;

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;

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. }
  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. }
  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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.