Lecture Notes Of Class 9: Borders and Outline
Objective:
To learn how to style borders and
outlines for various HTML elements using CSS.
Topics:
1. Border:
The border property allows you to
set a border around an element. It can be styled with different widths, colors,
and styles.
Syntax:
css
Copy code
selector
{
border: width style color;
}
- width:
Specifies the thickness of the border (e.g., 1px, 2px, medium, etc.).
- style:
Defines the type of border (e.g., solid, dashed, dotted, double, etc.).
- color:
Sets the color of the border (e.g., red, #000, rgb(0, 0, 0)).
Example:
css
Copy code
div {
border: 2px solid blue;
}
2. Border-Radius:
The border-radius property allows
you to round the corners of an element's border box.
Syntax:
css
Copy code
selector
{
border-radius: value;
}
- value:
The radius of the corners (e.g., 10px, 50%, etc.).
Example:
css
Copy code
div {
border: 2px solid green;
border-radius: 15px;
}
- You
can use border-radius for specific corners as well (top-left, top-right,
etc.).
css
Copy code
div {
border-radius: 10px 20px 30px 40px; /*
top-left, top-right, bottom-right, bottom-left */
}
3. Outline:
The outline property allows you
to add a line outside the border of an element. Unlike borders, outlines don't
take up space and don't affect layout.
Syntax:
css
Copy code
selector
{
outline: width style color;
}
- width:
Defines the thickness of the outline (e.g., 2px, thick, medium).
- style:
The style of the outline (e.g., solid, dotted, etc.).
- color:
Sets the color of the outline (e.g., blue, #ff0000).
Example:
css
Copy code
div {
outline: 3px dashed red;
}
- outline-offset
can be used to adjust the space between the element and its outline.
Example:
css
Copy code
div {
outline: 3px solid black;
outline-offset: 5px;
}
Lab
Exercise:
1. Styling a
Square Div with Border and Border Radius:
o
Create a div with a fixed width and height.
o
Apply a border with solid style, color blue, and
3px width.
o
Use border-radius to make the corners round.
HTML:
html
Copy code
<div class="box"></div>
CSS:
css
Copy code
.box {
width: 150px;
height: 150px;
border: 3px solid blue;
border-radius: 15px;
}
2. Styling a
Circle with Border and Outline:
o
Create a div with equal width and height (e.g.,
150px).
o
Use border-radius to create a circle.
o
Apply an outline with dotted style and color red.
HTML:
html
Copy code
<div class="circle"></div>
CSS:
css
Copy code
.circle {
width: 150px;
height: 150px;
background-color: lightgreen;
border-radius: 50%;
outline: 5px dotted red;
}
3. Styling a
Button with Border and Outline:
o
Create a button and add a solid border with a color
of your choice.
o
Use outline to add a focus effect when the button
is selected.
HTML:
html
Copy code
<button
class="btn">Click Me</button>
CSS:
css
Copy code
.btn {
padding: 10px 20px;
border: 2px solid black;
outline: none;
}
.btn:focus
{
outline: 3px solid orange;
}
4. Styling
Multiple Elements with Different Borders and Radius:
o
Create multiple elements (e.g., div, span, button)
with various border styles (solid, dashed, dotted).
o
Apply different border-radius values to these
elements.
HTML:
html
Copy code
<div class="box1"></div>
<span class="box2"></span>
<button
class="box3">Button</button>
CSS:
css
Copy code
.box1 {
width: 100px;
height: 100px;
border: 2px dashed green;
border-radius: 10px;
}
.box2 {
width: 80px;
height: 80px;
background-color: pink;
border: 2px dotted purple;
border-radius: 50%;
}
.box3 {
padding: 10px 20px;
border: 2px solid blue;
border-radius: 20px;
}
Conclusion:
By completing these exercises,
students will learn how to apply and experiment with various border and outline
styles, as well as how to control the shape and appearance of elements using
the border-radius property.
No comments:
Post a Comment