Square and Rounded Borders

Read : Browser Specific Definitions.
The post is created in Example and Explanations order.
Let's start with,

1. .krish{
   border:3px solid white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   Output
2. .krish{
   border:3px solid white;
   -moz-border-radius-topleft:35px;
   border-radius-topleft:35px;
   }
   

   Output
3. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35em;
   border-radius-bottomright:35em;
   }
   

   Output
4. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35pt;
   border-radius-bottomright:35pt;
   }
   

   Output
5. .krish{
   border:3px solid white;
   -moz-border-radius:35px 0px 35px 0px;
   border-radius:35px 0px 35px 0px;
   }
   

   Output
6. .krish{
   border:3px solid white;
   }
   

   Output

Explanations :-

1. border-radius:35px; will yield rounded border for all sides
2. border-radius-topleft:35px; will yield rounded border at the Top left side and note that the type is "px" pixel.
3. border-radius-bottomright:35em; will yield rounded border at the Bottom Right and note that the type is em where 1em = 16pt "pt" is points
4. border-radius:35px 0px 35px 0px; will yield rounded borders at topleft and bottom right postitions. the general syntax is
   border-radius:topleft topright bottomright bottomleft;
   It can be in any type.
5. When you don't mention border-radius property, there will be no rounds, but there will be square borders

How to define a CSS in general HTML?

Am not very good in explaining things. So, Instead of Explaining CSS(Cascading Style Sheet), let me straight away start with HOW TOs'?

The following is a basic style

<style type="text/css">
.textborder{border:0.5px solid black;}
</style>

The above code will be placed inside in two ways.Head section like the below:-

Method 1:- Placing directly inside <head/> section.

<html>
<head>

 <style type="text/css">

.textborder{border:0.5px solid black;}

</style>

</head>
<body>
<div class='textborder'>INFOTRON Krishna - http://www.krishnainfotron.blogspot.com</div>
</body>
</html>

Method 2:-
Step 1:- Place the code in a single notepad and save it as anything.css. The code should not be enclosed with (i.e) In the anything.css the notepad should be just like below:-

.textborder{border:0.5px solid black;}

and the HTML section should contain the following code.
Step 2:- Embedding the style into a HTML. Place the following code inside <head/> section.

<link rel="stylesheet" type="text/css" href="anything.css" />

There fore the HTML looks like this:-

<html>
<head>
<link rel="stylesheet" type="text/css" href="anything.css" />
</head>
<body>
<div class='textborder'>INFOTRON Krishna - http://www.krishnainfotron.blogspot.com</div>
</body>
</html>

The above code will yield the result as below :-

INFOTRON Krishna - http://www.krishnainfotron.blogspot.com