Get up to 80 % extra points for free! More info:

Lesson 11 - Border, shadow and the boxmodel in CSS

In the previous lesson, Floating content in HTML, we learned how to work with floating content and how to position elements next to each other.

In today's lesson, we're going to finish the article area on our site and learn about a couple of new properties.

Border

We split the article area up into 2 elements - header and section which we positioned next to each other. To add a bit more style, let's give the section a border.

In CSS, we set a border using the border shorthand property. For the value, we are able to set the border width, line style, and color. We already have a section selector in style.css set up where we set the float, width, and background. Let's add a border to our section's style with these settings:

article section {
    width: 706px;
    float: left;
    background: white;
    border: 2px solid #006797;
}

We have set the width to 2px, a solid line style and a color using hexadecimal notation (dark blue) to the border property. Maybe you also noticed that we decreased the element width from 710px to 706px. That's because the element is now 2px wider on each side because of the border (so the element width was inherently increased by 4px and we want to keep the original 710px). The border width is not considered a part of element width. Meaning that the element will always get a bit wider when you set a border..

Here's what it looks like now:

HTML border via the CSS border property - Make Your First Website, Step by Step!

Remember to always use colors that fit the design.

The same style can be also achieved by specifying each property separately:

border-style: solid;
border-width: 2px;
border-color: #006797;

There is no reason to set things up this way unless you only need to set a single property. The only reason I showed you was for completeness' sake and so you would understand what it is when you encounter it somewhere.

Border styles

We can use the following values as border styles:

  • none - No border.
  • hidden - Border is not rendered but it occupies space.
  • dotted - Dotted.
  • dashed - Dashed.
  • solid - Solid line.
  • double - Double.
  • groove - 3D border with a groove effect.
  • ridge - 3D border with a ridge effect.
  • inset - 3D border with an inset effect.
  • outset - 3D border with an outset effect.
  • inherit - Inherits the border style from the parent element.

Try it out for yourself :) The 3D styles can be seen properly on wide borders.

Border radius

A rather interesting property included is border-radius, which allow us to make border corners round. Add it to the section style:

border-radius: 10px;

The result:

Round corners of a border via HTML and CSS - Make Your First Website, Step by Step!

We usually don't use values greater than 10px because anything over it doesn't look good. If we set a very large value, the element becomes a circle. Which may possibly come in handy in some cases such as for circle buttons and such.

Another thing is that the border-radius can also be applied to images, making their corners round. Greater values also make the image looks like a circle. Let's try it out and see what it actually looks like.

For test purposes, we can omit selectors and set the style straight in the HTML. We are able to do this using HTML's style attribute. Obviously, we're messing the code up and are violating the key principle of separating contents and styles. However, all we're doing is creating a design and going with what looks good. For those specific intents and purposes, the style attribute is quite useful (test purposes, just to be clear). Modify your image's code in HTML to look like this:

<img src="images/avatar.png" alt="HoBi the programmer" style="border-radius: 500px;" />

The result:

Round corners of a border via HTML and CSS - Make Your First Website, Step by Step!

Round corners don't fit this particular template's design, so go ahead and remove it. If it so happens that you like them, just remove the style attribute and create a proper selector for them in style.css. The style attribute shouldn't occur anywhere in the HTML parts of a finished web page.

Shadow

We have already gone over shadows using the text-shadow CSS 3 property. However, we are able to set a shadow to any element on a webpage using the box-shadow property. Let's go ahead and style the section's shadow:

box-shadow: 2px 2px 7px #1c2228;

The first 2 values are the shadow's position, the next one is a blur radius, the last one is a color. The property styles a rectangular shadow around an element. Let's take a look at what it did:

Element shadow in HTML using the CSS box-shadow property - Make Your First Website, Step by Step!

Margin and padding

The section contents are very close to the edge which doesn't look very good. It's a good practice to keep a certain amount of spacing between elements. We can set them using padding and margin properties. The difference between these 2 is often referred to as the boxmodel, which looks like this:

Box model in CSS for an HTML element - Make Your First Website, Step by Step!

In the image, we see an element (our section) and a border around it. The spacing between a border and an element's content is called padding. The spacing between a border and element surroundings is called a margin. Simply put: the padding is the inner spacing and the margin is the outer spacing.

None of these spacings are part of the element's width! Now, set the section's padding to 20px and decrease the width by 40px (20px for each side):

padding: 20px;
width: 666px;

This way, we have set up a good amount of inner spacing on all sides:

A padding in HTML styled via CSS - Make Your First Website, Step by Step!

The property can also be formatted like this:

padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

The syntax above would come in handy if we wanted to only set a single spacing or different widths for each individual spacing. We are able to set individual values in the shorthand syntax as well (the order is top, right, bottom, left):

padding: 20px 20px 20px 20px;

There is also a third possible syntax, which is sometimes put into use:

padding: 20px 20px;

The first value here sets the vertical spacing (top and bottom) and the second one sets the horizontal one (left and right). In the next lesson, Solved tasks for HTML and CSS lessons 10-11, we're going to code a navigation bar and add it to our website. The code we worked on in today's lesson is available for download below, as always.

In the following exercise, Solved tasks for HTML and CSS lessons 10-11, we're gonna practice our knowledge from previous lessons.


 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

Download

By downloading the following file, you agree to the license terms

Downloaded 42x (76.73 kB)
Application includes source codes in language HTML

 

Previous article
Floating content in HTML
All articles in this section
Make Your First Website, Step by Step!
Skip article
(not recommended)
Solved tasks for HTML and CSS lessons 10-11
Article has been written for you by David Capka Hartinger
Avatar
User rating:
3 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities