Web · Introduction to CSS
Borders and Border Radius
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to CSS Borders
Borders are lines that go around elements. They help define the boundaries of elements and can make your webpage look more structured.
In CSS, we can add borders to any HTML element. The basic border property has three parts:
1. Width - how thick the border is
2. Style - what the border looks like (solid, dashed, etc.)
3. Color - what color the border is
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px solid blue;
}
p {
border: 2px dashed red;
}
</style>
</head>
<body>
<h1>Codémon Trainer Guide</h1>
<p>Learn about different Codémon types!</p>
</body>
</html>
In this example, we've added:
- A solid blue border around the h1 element
- A dashed red border around the paragraph
Exercise 2 — Border Properties in Detail
Let's look at each part of a border in more detail. You can set border properties in two ways:
1. Using the shorthand
border
property
2. Using individual properties:
border-width
,
border-style
, and
border-color
<!-- Using the border shorthand property -->
<p style="border: 5px solid blue;">Border shorthand: 5px solid blue</p>
<!-- Using individual border properties -->
<p style="border-width: 3px; border-style: dashed; border-color: red;">Individual properties: 3px dashed red</p>
<!-- Different border style -->
<p style="border: 3px dotted green;">Border style: dotted</p>
Here are the key border properties:
1. Border Width - Can be set in pixels (px), points (pt), em, etc., or using keywords like thin, medium, or thick.
2. Border Style - Different styles include:
- solid: a solid line
- dashed: a series of dashes
- dotted: a series of dots
- double: two solid lines
- none: no border (default)
3. Border Color - Can be any CSS color: named colors, HEX, RGB, etc.
Shorthand vs Individual Properties
Using the shorthand property (border: 5px solid blue;) is quicker, but individual properties give you more control. For example, you might want to set border-style on all sides but change only the top border's width.
Exercise 3 — Border Shorthand Syntax
Which of the following correctly uses the border shorthand property to create a 2-pixel wide dashed red border?
Options
• ```border: 2px dashed red;```
• ```border: dashed 2px red;```
• ```border: red 2px dashed;```
• ```border: red dashed 2px;```
Hint : The border shorthand follows a specific order: width, style, color.
Exercise 4 — Individual Border Sides
You can apply borders to specific sides of an element using these properties:
-
border-top
: Top border only
-
border-right
: Right border only
-
border-bottom
: Bottom border only
-
border-left
: Left border only
<p style="border-top: 3px solid blue;">Top border only</p>
<p style="border-right: 3px dotted red;">Right border only</p>
<p style="border-bottom: 3px dashed green;">Bottom border only</p>
<p style="border-left: 3px double orange;">Left border only</p>
You can also specify individual properties for each side, like this:
-
border-top-width
,
border-top-style
,
border-top-color
-
border-right-width
,
border-right-style
,
border-right-color
...and so on for bottom and left
<p style="border-top-width: 5px; border-top-style: solid; border-top-color: purple;">
Setting individual properties for the top border
</p>
Exercise 5 — Border Properties and Descriptions
Match each border property with its correct description:
Items to match
• border-width
• border-style
• border-color
• border-top
Definitions
• Controls how thick the border is
• Sets whether the border is solid, dashed, etc.
• Determines the color of the border
• Shorthand for all properties of only the top border
Exercise 6 — Complete the Border CSS
Complete the CSS to create:
1. A paragraph with a solid green border
2. A heading with a red border on the bottom only
<!DOCTYPE html>
<html>
<head>
<style>
p {
____ 2px ____ green;
}
h1 {
____ 3px solid ____;
}
</style>
</head>
<body>
<h1>Codémon Types</h1>
<p>Water, Fire, and Plant are the main Codémon types.</p>
</body>
</html>
Options: border: border-bottom: solid dashed red blue
Hint : Think about which property creates a border all around versus just on one side, and remember the shorthand syntax order.
Exercise 7 — Introduction to Border Radius
The
border-radius
property allows you to create rounded corners on your elements. This is a great way to make your design look more modern and less boxy.
The value of
border-radius
can be in pixels, percentages, or other CSS units. The larger the value, the more rounded the corners will be.
<p style="width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue;">No border radius (normal corners)</p>
<p style="width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue; border-radius: 10px;">Slightly rounded corners (10px)</p>
<p style="width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue; border-radius: 50px;">Very rounded corners (50px)</p>
Circle with Border Radius
If you set border-radius to 50% on a square element (same width and height), you'll get a perfect circle!
Exercise 8 — Creating a Circle with Border Radius
If you have a square element (100px * 100px), which border-radius value would transform it into a perfect circle?
Options
• ```border-radius: 50%;```
• ```border-radius: 99px;```
• ```border-radius: 25px;```
• ```border-radius: 360deg;```
Hint : When using percentages, 50% creates a perfect circle on a square element because it rounds each corner by half of the element's width/height.
Exercise 9 — Different Border Radius for Each Corner
You can specify different border radius values for each corner of an element. This allows for more creative designs.
There are two ways to do this:
1. Using the shorthand property with four values:
border-radius: top-left top-right bottom-right bottom-left;
2. Using individual properties for each corner:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
<!-- Different radius for each corner -->
<p style="width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue; border-radius: 20px 5px 30px 10px;">
Different radius for each corner (20px 5px 30px 10px)
</p>
<!-- Only top-left corner is rounded -->
<p style="width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue; border-top-left-radius: 50px;">
Only top-left corner is rounded (50px)
</p>
Remember the Order
The order of values in the border-radius shorthand is read clockwise, starting from the top-left corner: top-left, top-right, bottom-right, bottom-left.
Exercise 10 — Border Radius Properties
Match each border radius property with the corner it affects:
Items to match
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
Definitions
• Upper left corner
• Upper right corner
• Lower right corner
• Lower left corner
Exercise 11 — Create a Styled Button
Complete the CSS to create a button with:
1. A solid border
2. Rounded corners
<style>
button {
background-color: lightblue;
____ 2px solid blue;
____ 10px;
}
</style>
Options: border: border-radius: border-color: border-width: border-style: border-type:
Hint : Think about which properties you need to create a border and round its corners.
Exercise 12 — Border Radius Shorthand Order
What is the correct order of corners in the border-radius shorthand (border-radius: 5px 10px 15px 20px)?
Options
• top-left, top-right, bottom-right, bottom-left
• top-left, top-right, bottom-left, bottom-right
• top-right, top-left, bottom-left, bottom-right
• top, right, bottom, left
Hint : Remember that border-radius values follow a clockwise pattern starting from the top-left corner.
Exercise 13 — Create Mixed Border Styles
Complete the CSS to create a card with different border styles on each side:
- Right : dashed
- Left : double
- Bottom : dotted
- Top : solid
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 20px;
background-color: lightgray;
border-top: 2px ____ red;
border-right: 2px ____ blue;
border-bottom: 2px ____ green;
border-left: 2px ____ orange;
}
</style>
</head>
<body>
<p>This element has different border styles on each side.</p>
</body>
</html>
Options: solid dashed dotted double ridge groove
Hint : You just have to read the order of the styles and fill in the blanks accordingly.
Exercise 14 — Border Effects and Their Code
Match each visual effect with the CSS code that creates it:
Items to match
• Element with rounded corners
• Element with a bottom underline only
• Perfect circle shape
• Element with dashed outline
Definitions
• border-radius: 15px;
• border-bottom: 2px solid black;
• width: 100px; height: 100px; border-radius: 50%;
• border: 2px dashed gray;
Exercise 15 — Creating a Pill-Shaped Button
A pill-shaped button has completely rounded ends (like a capsule). For a button that is 200px wide and 50px tall, which border-radius value would create this pill shape?
Options
• ```border-radius: 25px;```
• ```border-radius: 10px;```
• ```border-radius: 10%;```
• ```border-radius: 5px;```
Hint : For a pill shape, the border-radius should be half the height of the button to create perfect semicircles at the ends.
Exercise 16 — Complete the Border Styling
Complete the CSS to create a box with a dotted border and rounded corners:
<style>
div {
____ 2px ____ red;
____ 15px;
}
</style>
Options: border: border-radius: dotted solid double
Hint : Think about which properties you need to create a dotted border with rounded corners.