Intro to CSS: Borders
CSS allows you to create custom borders for your content.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.
The first step in making a border is to pick a border-style.
Here are possible values for border-style:
✶dotted
✶dashed
✶solid
✶double
✶groove
✶ridge
✶inset
✶outset
✶none
✶hidden
✶mix
.withBorder {
border-style: solid;
}
➼ withBorder - This is our CSS class name.
➼ border-style - It will have a solid line border.
<div class = 'withBorder'>
<h3>This heading, and the image below it, are placed in a bordered container.</h3>
<img width = '200px;' src = '../logo.png'>
</div>
Next, we will decide how thick we want our border-line.
.withBorder {
border-style: solid;
border-width: 4px;
}
➼ withBorder - This is our CSS class name.
➼ border-style - It will have a solid line border.
➼ border-width - Our border has a width of 4px.
<div class = 'withBorder'>
<h3>This heading, and the image below it, are placed in a bordered container.</h3>
<img width = '200px;' src = '../logo.png'>
</div>
Finally we will pick a color.
.withBorder {
border-style: solid;
border-width: 4px;
border-color: red;
}
➼ withBorder - This is our CSS class name.
➼ border-style - It will have a solid line border.
➼ border-width - Our border has a width of 4px.
➼ border-color - It is red.
<div class = 'withBorder'>
<h3>This heading, and the image below it, are placed in a bordered container.</h3>
<img width = '200px;' src = '../logo.png'>
</div>
Sometimes you may not want the same border on each side.
.someBorder {
border-top-style: dashed;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
}
➼ someBorder - This is our CSS class name.
➼ top - The top of the element will have a dashed line.
➼ right - The right side of the element has no border
➼ bottom - The bottom of the element will have a dashed line.
➼ left - The left side of the element has no border.
<div class = 'someBorder'>
<h3>This container has a border above and below it.</h3>
<img width = '200px;' src = '../logo.png'>
</div>
Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.