Borders

• You can supply each HTML element with a border
• In order to specify a border, you can either specify border-style, border-width and border-color separately, or use the shorthand property border (recommended)
• Also the properties border-radius and box-shadow, which are somewhat related to borders, are discussed in this section

property	example	description
border-style	border-style: solid;	specifies the style of a border
border-width	border-width: 2px;	specifies the width of a border
border-color	border-color: #f04c25;	specifies the color of a border
border	border: 3px solid red;	shorthand to specify all properties of a border at once
border-radius	border-radius: 15px;	specifies the roundness of the corners of an element
box-shadow	box-shadow: 6px 6px 3px grey;	adds shadow to an element

border-style

• Specifies the style of the border
  • Possible values: solid, dotted, dashed, double, inset, outset, ...

img {
    border-style: solid;
}

WARNING

This property has no default value. It has to be specified or no border will be shown!

EMMET instruction	result
bds + TAB	border-style: ;
bds:s + TAB	border-style: solid;

border-width

• Specifies the width of the border
  • Possible values: thin, medium (= default), thick, ...px

img {
    border-style: solid;
    border-width: 5px;
}

EMMET instruction	result
bdw + TAB	border-width: ;

border-color

• Specifies the color of the border

img {
    border-style: solid;
    border-color: red;
}

EMMET instruction	result
bdc + TAB	border-color: #000;

Shorthand property border

• By using the shorthand property border, you can specify the width, style and color in one statement

img {
    border: 5px solid red;
}

EMMET instruction	result
bd+ + TAB	border: 1px solid #000;

REMARKS

• If you only want to specify a left, top, right or bottom border, you can use the similar properties border-left, border-top, border-right and border-bottom
• Also the separate style, width and color properties exist for left, top, right and bottom: border-left-style, border-top-width, border-bottom-color, ...

border-radius

• The property border-radius allows us to round the corners of an element's border
  • If you supply one value (border-radius: 50px;), it applies to all four corners
  • If you supply two values (border-radius: 50px 20px;), the first value (50px) applies to the top-left and bottom-right corner, the second value (20px) applies to the top-right and bottom-left corner
  • If you supply three values (border-radius: 50px 10px 75px;), the first value (50px) applies to the top-left corner, the second value (10px) applies to the top-right and bottom-left corner and the third value (75px) applies to the bottom-right corner (rarely used)
  • If you supply four values (border-radius: 0px 20px 5px 40px;), the first value (0px) applies to the top-left corner, the second value (20px) applies to the top-right corner, the third value (5px) applies to the bottom-right corner and the fourth value (40px) applies to the bottom-left corner (clockwise)
• In theory this property can be applied to any element but obviously, the result will only be noticeable if
  • the element has a "visible/colored" border or background
  • the element is an image

img {
    border-radius: 50px;
}

DESIGN TIP

• Use img { border-radius: 50%; } to make a circular image (out of a square image)
• In other scenarios, avoid using percentages and use absolute values. This will make sure the rounded corners look more modern.

EMMET instruction	result
bdrs + TAB	border-radius: ;

box-shadow

• The property box-shadow allows us to add shadow effects around an element
  • Syntax: box-shadow: hoff voff blur spread color;

value	required/optional	description
hoff	required	position of the horizontal shadow; negative values are allowed
voff	required	position of the vertical shadow; negative values are allowed
blur	optional	blur radius; default value is 0px
spread	optional	spread radius; make shadow bigger (positive value) or smaller (negative value); default value is 0 (shadow is as large as element)
color	optional	(partially transparent) color of the shadow

img {
    box-shadow: 10px 10px 5px rgba(155, 245, 255, 0.5);
}

DESIGN TIP

Avoid using a harsh box shadow for a modern look & feel. Instead, go for a more minimalistic use of the feature.

All-in-one example

Warning

To get a more realistic looking example, we used padding and margin from the Box Model. You will learn more about what it means and how it's used in a later chapter.