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

    
<h1>CSS3 - Borders: example</h1>

<p>Thomas More is the largest university of applied sciences in Flanders,
offering more than 30 Dutch-taught and a range of English-taught bachelor
degree programmes &amp; postgraduates in the province of Antwerp. </p>
<article>
  <a class="primary">Primary</a>
  <a class="secondary">Secondary</a>
</article>
<img id="exterior" src="https://picsum.photos/300/200" alt="old car exterior" />

    
h1 {
  /* border-left-style: solid;
     border-left-width: 5px;
     border-left-color: #FA6432; */
  border-left: 5px solid #FA6432;
}

img {
  border-radius: 15px 30px;
}

p, img, a {
  box-shadow: 0px 5px 15px rgba(0, 40, 60, .17);
}

.primary {
  color: white;
  background-color: #FA6432;
  border-left: 5px solid #C03D1E;
}

.secondary {
  color: #FA6432;
  background-color: white;
  border: 2px solid #FA6432;
}

a:hover,
a:active,
a:focus {
  color: white;
  background-color: #C03D1E;
  border-color: #C03D1E;
}

/* Box model */
h1 {
  margin-left: 5px;
  padding-left: 10px;
}

p {
  margin: 0px 20px;
  padding: 20px;
}

img {
  margin: 20px;
}

article a {
  margin: 20px 0 0 20px;
}

.primary {
  padding: 14px 28px;
}

.secondary {
  padding: 12px 26px;
}

/* Display */
article a {
  display: inline-block;
}

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.