CSS Tutorial for Beginners - 25 - Border Property Part 2 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 25th tutorial on
beginning CSS today we're going to look
at curving your borders and you do that
with a radius property and so let's look
at our web page and so what we'll do is
we'll put this against our generic
paragraph class that we create so we
want to curve each one of these corners
and so let's go ahead and do that and
we'll open up our style sheet and here's
our generic paragraph class that we
created so let's go ahead and just copy
and paste this in here and again it'll
curve it by ten pixels so let's save
this now I want you to open this up with
Google Chrome if you have Google Chrome
installed and you'll see here we've got
these nice curved borders now now if we
close this out and open this up in
Internet Explorer you'll notice they're
not curved and the reason is I wanted to
point this out some of these rules don't
work with the older versions of ie so I
have ie eight now if you have a later
version of Internet Explorer it might be
fine but I eight didn't support this
rule so just be aware that some of the
older releases do not support some of
the CSS properties so again if we open
this back up in chrome we can see it
works fine because I have the latest
version of Chrome installed on this
computer and now of course we see the
property is applied so we'll use Chrome
throughout the rest of this video and if
you have a later version of ie Explorer
you can certainly go ahead and open it
up with IE 9 or 10 and this property
should work just fine now what I want to
also show you now is that you can also
add curvature just select corners so for
instance we can do border bottom left
this won't be curved but if we do the
border top left side and put 10 pixels
in here it will be curved so this is a
way for you to specifically specify
which corners you want curved so let's
go ahead and copy and paste all these
rules in here and I'll show you how this
works so let's save this let's open it
up in Google Chrome
and there you can see we've only got the
two top corners curved if we wanted to
curved the bottom corners we could just
add ten pixels so you see how that works
now let's go ahead and actually curve
all the
corners so we'll put this property back
in there and save it and we'll open it
back up with chrome and there you can
see we're back to normal okay let's
close that out these only work against
the corners these properties if you want
to work against a specific side you can
also do that and you can do that against
the style the width and the color so
let's pick a style for instance let's
say let's put in here border bottom -
style and we'll do dotted so now we're
just going to say we only want the
bottom dotted and so let's go to our
style sheet and you can see here the
style we were applying was solid so it's
a planet of course - all the sides but
here we'll just say we want the bottom
dotted so if we save this and go down
here you can see now just the bottom is
dotted so that's how that works and
actually open that up and Internet
Explorer let's actually open that up in
chrome so we can see the curvature and
there you can see we've got the bottom
dotted so that's how that worked and
again like I said you can also do that
with width and color so let's actually
change this to red and we'll put in
color and now the bottom should be
painted in red so we'll open this up
again in Google Chrome and you can see
we've got a red bottom so feel free to
play around with these and I will see
you guys in the next video