Make Rounded Corner designs using Html and Css

By Published on -

I'm Nowshad Hossain Rahat and in this tutorial I will show you that - "How you can make some beautiful rounded corner design using HTML and CSS".

Sometimes we visits some websites over the internet and we see some very attractive rounded corner designs on those websites.But actually we don't know that how we can also do the same thing using HTML and CSS.But don't worry,this isn't so tricky thing OK.I will first show you the steps through screenshots and then I will also share the codes then you can copy this code from my post,ok.So let's get started 😃

1.Open your code editor first and create a new file and save the file in a specific folder.

Then write this code given in the picture below and save this code.


2.Let's check the priview

-----------------()-----------------

Good but those corners are not rounded!
Now what?
Let's see.

2.Edit the last code you saved and make same as mine⬇


=================

Now let's check it!


============⚠============

Wow it's working!But how?
The power to make a rounded effect on a div or an html element is in⬇

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-left-radius
4. border-bottom-left-radius

These four  CSS properties are used to make rounded corner design in HTML.But actually these are so long CSS property and writing them every time is a hard work.Si in CSS there is a short hand of these four property, which can make the same design in html, only in one line of code and this is - 

1. border-radius

Code :

<!-- html structure -->

<div class="rounded_corner">
	<!-- your codes -->
</div>

<!-- css styles -->

<style type="text/css">
	
	.rounded_corner {
		margin: auto;
		padding: 0;
		width: 200px;
		height: 200px;
		background: #CC6820;
		
		/* using four parameters for each corner */
		
		border-radius: top left bottom right;
		
		/* using one parameters for all corners */
		
		border-radius: all;
	}
	
</style>


This shorthand CSS property accept four parameters.The first one is the top left corner , the second one istop right corner and the third one is  bottom right corner and the fourth one is bottom left corner.You will understand the corners in the picture below, ok.

Just remember that in this shorthand property if you give only one parameter like border-radius:30px; then it will provide this style to the every corners of the html element you have selected.That means - all the four corners will be 30 pixel rlunded or if you give four parameters then the parameters will be applied to the HTML element as there position.That means the first parameter value will be the top left corner radius of the HTML element and the second one is for the top right corner of the third one is for the bottom right corner and the fourth one is for the bottom left corner of the HTML element.

So these are the two way you can use to apply border radius using this shorthand property.But if you don't like to use the shorthand property then you can also use those long CSS properties to apply border radius to the HTML element.🙄😊

You can set the value of these four CSS property and the shorthand one in these two ways -

1. px (pixel)
2. % (percent)

exg:30px or 30%

But these two of values are not same.They are very different.Ok,if want to know more about it I will publish a post about it nex time.

Now you can see the pocture below to understand that which of the property can effect which corner of an element.

-----------------------------


I hope that you have understood the tricks to make the rounded corner design in HTML and CSS.I hope that you will not face any problem to design these things.But if you still have any other questions or confusions, then you can tell me in the comment box below.

Thanks for reading my tutorial.Please share this article to your Facebook or Twitter friends. 😊

Allah Hafiz

Also Read :-

Categories :

Comments

Post a Comment