In these day rounded corners became a classy as compare to recent years.
Originally rounded corner on the web content was only made with images
and further markup.But now this all is possible with CSS border-radius
property. And all browser versions are also supporting it. This popular
in both grab graphic from server and also in Photoshop editing.
In this tutorial border-radius is discussed briefly.
There are following properties for border radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius
The border-top-left-radius property
In this example the top left side of the box will be rounded of 50px because of border-top-left-radius property.
<styletype="text/css">div{border-top-left-radius:50px;height:200px;width:200px;background-color:lightgreen;}</style>
<div><div>
Output of above code
The border-top-right-radius property
In this example the top right side of the box will be rounded of 50px because of border-top-right-radius property.
<styletype="text/css">div{border-top-right-radius:50px;height:200px;width:200px;background-color:lightgreen;}</style>
<div><div>
Output of above code
The border-bottom-right-radius property
In this example the bottom right side of the box will be rounded of 50px because of border-bottom-right-radius property.
<styletype="text/css">div{border-bottom-right-radius:50px;height:200px;width:200px;background-color:lightgreen;}</style>
<div><div>
Output of above code
The border-bottom-left-radius property
In this example the bottom left side of the box will be rounded of 50px because of border-bottom-left-radius property.
<styletype="text/css">div{border-bottom-left-radius:50px;height:200px;width:200px;background-color:lightgreen;}</style>
<div><div>
Output of above code
The border-radius property
In this example the all the corners of the box will be rounded of 50px because of border-radius property.
<styletype="text/css">div{border-radius:50px;height:200px;width:200px;background-color:lightgreen;}</style>
<div><div>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
