Welcome back to another lesson.
Just like gradients and CSS.
We also have a very interesting property called border radius.
We know that each element in HTML is a box with sharp edges but we can actually transform this box
into various different shapes and we can do all that using the border radius property.
So what we actually do with the border radius property is that we modify the four corners of the box
and we provide a border radius for that.
So as we can see over here we have four different properties border top left for modifying this edge
then top right for this edge and likewise bottom right and bottom left so if you want to set a radius
for the top left side of a box you can use both the top left radius and then provide a value.
It could be in pixels it could be in any other measuring unit.
Border Radius Property
And if you want to provide the border radius property for all the full sites then there’s a shorthand
method as well and for that all we have to do is type border radius and then follow this order so we
can force mentioned the top left then top right then bottom right and bottom left.
It goes in our clockwise direction top left and top right then bottom right and bottom left so in this
lesson I’m going to be covering this border radius property and show you how we can modify the edges
of the elements.
So let’s get started.
So to demonstrate the effect of border radius property we have a stiff element with a couple of properties
that we can see on the left in order to make things more noticeable.
Now I’m going to be applying the border radius property to the corners of the stiff element and I’m
going to be applying the border radius property to this div element and see the different shapes that
we can create so let’s first target the individual edges of the div.
So first let me try border.
Top left radius and here let me make it let’s say 20 pixels
and here we have a curved edge this time which is not there on the other side because we applied the
border radius only on the top left side likewise I can apply the border radius property to the other
side as well
and let’s just make changes so I make this one top right save it and then I reload.
So here we have the curve edge for the top right as well.
And likewise I can add four other sites as well.
So when I’m adding for all the four sites let me rather use the shorthand border radius and then let’s
force 10 pixels.
And if I just keep 10 pixels over here just once this means for all four sites if I save it and then
I reload here I can see that all the four sites have now the curved edges of equal radius I can increase
the value as well or I can express it in a different unit as well.
Like the M unit for instance if I have a load then you can see that the M unit is quite big we can actually
keep it a person DHS will save it and then reload and share we have 10 percent for all four sites.
So the bigger the value of the border radius the more will be the edges.
Now if you’re using data and not applying the responsive layout then your image might get distorted
when seen on a bigger screen size or a smaller screen size.
Now we can try different values for different sites as well.
So let me first keep this tight as 300 pixels and then the remaining sites.
I’m gonna keep zero if I say it then this is the shape I get.
I can invoke it as well by keeping the top left as CEO and the top right as 300 pixels this time
or I can make it zero and keep it for the other sites let’s now try at the alternate edges 300 pixels
to need 300 pixels.
Now see what kind of an image we get.
And this time we have a leaf like shape let’s add a side some dimension to this side as well and see
it and we have a different shape now.
In fact we can create any number of shapes like this by chaining different values.
Now let me show you another trick for creating a circle.
So when you want to create a circle you can make the same size for all the four edges.
Now it has to be a slightly bigger value.
Let’s say I make it 350 pixels for all four sides.
Now if I rephrase the base then I get kind of a circle but not yet complete circle.
I can increase the value
a bit more circular but again I can keep on changing the values in order to get a perfect circle.
But there is a shortcut as well.
I can make it 50 percent.
It’s now gonna be similar from all four sides.
If I refresh and here we have a circle now and remember that we have the same weight and height.
So it was actually a square that we converted into a circle.
But if the word was quite big let’s say 80 CW then we wouldn’t really get a circle it would rather be
an ellipse.
So then you are creating a circle can actually increase the height to make it a circle.
Well I took the example of the div container just to be able to show you the different shapes that we
can get by different values but we can apply this border radius property to any element which means
that if I for example go to the HDMI and here we have this paragraph which is at the moment commented
out.
Let me bring it back
and let’s add some properties to this one to make it a little more elegant because currently it’s a
plain text.
OK so I’m going to target a paragraph and here let’s give it a word then height so let’s set the it
as 50 percent higher as let’s say 300 pixels and then let’s set the background color as something like
see green and let us also set the phone color as white.
Now I’m going to give a boat a radius of let’s say 20 pixels
and here we have our paragraph.
Let’s set some padding as well
10 pixels and here we have this paragraph.
I can make this shape a circular shape or different other shape.
We know that how we can do that feels the same we can apply over to this paragraph as well so we can
apply this property to any element and can really make it look more elegant so you can
also practice this border radius property on different elements and at the same time change different
values to see what are the different shapes you can create.
Now we can create different shapes but still there are certain shapes that we cannot create using the
border radius property.
And for those shapes we have various different properties as well like we have to transform property
which I’ll be covering in one of the next lessons.
Now before we finish let’s also talk about the browser accessibility.
So if we go to the Web site can I use dot com
and type this border radius to check the compatibility with the other browsers and it’s almost green
everywhere which means that all latest browsers support this property but if we look at the earlier
versions than somewhere like for instance with the Firefox especially the version earlier than 4.0 we
may have to prefix M O Z just like we learned about it in one of the previous lessons.
And likewise for the Chrome browser as well or the version for we have to add that gate and this could
be the same case for ISIS as well.
I was also takes web gate as the prefix.
So in order to ensure that the users coming from various different browsers are able to experience the
same effects you can actually go one extra step and add these prefixes as well just like we did last
time.
So I can add this border radius property twice but before this actual border radius because wherever
prefixes that we get are always before the general property.
Now I’m going to add Web Kit for Chrome and then O Z for Mozilla it’s now compatible and likewise I
can add on this site as well.
Again I can prefix that Kit and Mozilla most
great.
It’s now compatible with the earlier versions of these browsers as well.
So this was about the border radius property.
So keep learning and see you in the next lesson.
