In web designing, CSS is used to make a beautiful designs in website. CSS3 is a latest version of CSS which make revolution in the field of web designing. I also love to working in it. Rounded border property is also a part of CSS3. Today I will teach you how we create rounded borders with a very small and simple code of CSS3 using border-radius property.
How to Create Rounded Borders in CSS3
We write simple code of Html and CSS, we use only 5 properties that is width, height, background-color, border and border-radius. In this post we focus to learn border-radius property.
First make a class with name box (class name always start with dot (.) as .box) use all above properties to show div. At the end I create a div and assign a class = “box” to it.
<style>
.box {
width:200px;
height:200px;
background-color:red;
border:5px solid blue;
border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
}
</style>
<html>
<body><div class=”box”></div></body>
</html>
The Output of above Code is given below :
This is Rounded Box div
This property is not working on some browsers like Mozilla, safari and Google chrome, so to show border radius in these browsers we use “-webkit- for chrome and safari and -moz- for Mozilla” as :
-webkit-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
you see 4 values of this property first 10px is for top left, 2nd for top right and so on. It moves in clock wise direction. If you want to give same radius to all corners then may be code is written as :
border-radius:10px;
This is short form of code. All corners of box pick 10px radius. To increase the radius of corners replace 10px with any higher value. If you want a complete circle then give it 360px as shown below:
<style>
.circle {
width:200px;
height:200px;
background-color:green;
border:5px solid red;
border-radius:360px;
-webkit-border-radius:360px;
-moz-border-radius:360px;
}
</style>
<html>
<body><div class=”circle”></div></body>
</html>
To run this code, copy it and paste it in notepad file, save notepad file with .html extension and open it in your browser.You will see a round colorful circle as shown in output.
The Output of above Code is given below :
Give border-radius to Images
Same thing is may be applied to images which make your site more attractive. In above examples we give border-radius to <div> but if you want to give same effect to any image , same class assigned to that image but this time we don’t need extra CSS properties like width, height and background-color because image has its own height, width and background color as shown below :
<style>
.image-round {
border:5px solid orange;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
}
</style>
<html>
<body><img src=”http://example.com/wp-content/uploads/2013/06/lion-image.jpg” class=”image-round”/></body>
</html>
The Output of above Code is given below :
Your Assignment
If you really want to learn these things then must do your assignment, copy all above codes and insert into any editor like Notepad or Notepad++ and save file as filename.html and open it in your browser and see output then practice these codes by typing yourself. If you need any help regarding these codes do not hesitate to ask any type of question below. I will teach you some more great tools and properties of CSS3 in later posts.
Reviewed by Freelance Web Designer
on
April 27, 2020
Rating:
No comments: