Styling with CSS - Part 11 - Border in Box Model Structure Video Lecture - IT & Software

welcome to the w3schools CSS border
tutorial the CSS border properties allow
you to specify the style size and color
of an element's border let's start with
border style the border style property
specifies what kind of border to display
and none of the other border properties
will have any effect unless the border
style property is set let's go through
the different values that can be set for
border style none specifies no border
dotted specifies a dotted border dashed
specifies a dashed border solid
specifies a solid border double
specifies a double border and four
double border the width of the two
borders and the space between them is
the same as the border width so let's
see it set the border width for this
element now we set the border width to
30 pixels you can see that the outer
border has ten pixels the inner border
has ten pixels and the space between the
borders is 10 pixels groove this
specifies the 3d grouped broader let's
set the width and color so we can
demonstrate this
so the GRU values specifies a 3d groove
effect and rich specifies a 3d Ridge
effect inset specifies a 3d inside
effect an outset specifies 3d outside
effect the hidden value is only used for
table elements with a collapse border
and the border width property is used to
set the width of the border the width
can be set in pixels like this or by
using one of the three predefined value
medium like this or thin or thick
the border color property is used to set
the color of the border the color can be
set by a hex value like this or an RGB
value like this or color name like this
you can also set the color to
transparent if the border color is not
set it will inherit the color from the
color property of the element it's set
to so if we set the color for this
element to red and remove the border
color you can see that both the text and
the border around it gets a red color
from the color property with CSS it's
possible to specify different borders
for different sides this example we've
set the border top style to dotted the
border right style to solid the border
bottom style to dotted and the border
left style to solid it can also be set
with a single property like this
borderstyle dotted space solid this has
the same border as before but is set
with a single property the border style
property can have from one to four
values so we can set it to dotted solid
blue dashed so you see that top border
is started the right border is solid the
bottom border is double and the left
border is stashed you can also have
three values like dotted solid double
now the top border is studded and the
left and right borders are solid and the
bottom border is double and if we set
two values like before you can see that
the top and bottom borders are dotted
and the left and right borders are solid
if we set it to just one value all our
borders are dotted and we use the border
style property in this example but it
also works with border width and border
color like this and border color like
this
there are many properties you can use
with border and to shorten the code is
possible to specify all the individual
border properties into one property this
is called a shorthand property the
border property is shortened for the
following individual border properties
order weight border style and border
color see here we have set the border
width border style in the border color
using shorthand property called border
let's try and change it up
there are also shorthand properties for
each side of the border in this example
we will set the width style and color of
the top border using the border top
property and also change this to any of
the other side's like bottom or left or
right on the w3schools tutorial page
there are more examples and we list all
the CSS border properties and there's a
link for each property that goes to our
CSS reference where you can find more
information for any CSS property this
concludes our tutorial for CSS border
thank you for watching