ST. BLAISE COMMUNITY ACADEMY, INC.

Senior High School

San Luis, Batangas/ chs_sbca53@yahoo.com/ www.chs-sbca.com

Learner’s Material
COMPUTER
PROGRAMMING
(.net technology) 2
Module 3: Quarter 1 | 2ND SEMESTER
Topic: CSS BORDERS

1|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT

NAME OF STUDENT:
 Republic of the Philippines
DEPARTMENT OF EDUCATION
Region IV-A CALABARZON
PROVINCE OF BATANGAS

St. Blaise Community Academy, Inc.

San Luis, Batangas/ chs_sbca53@yahoo.com
 043 – 740-960609997646638 / 09218539116

Name of Student: ________________________________________________ Section: _______________________

Present Address: _________________________________________________ Contact no.____________________
Subject Matter: COMPUTER PROGRAMMING (.NET TECHNOLOGY) GRADE 11 – TVL ICT
Topic: CSS | BORDERS (Module 3 – Quarter 1)/ Second Semester

As JavaScript future developers, the sheer amount of stuff we're expected to know is enormous, and it
grows bigger every day.
With so many different languages, tools, and technologies competing for our time and attention, it can
be tough to figure out what to prioritize. Should we get better at TypeScript?
In my opinion, if we really want to maximize the things that we can learn in Javascript, one of the best things we
can focus on is CSS.
By the end of this lesson, you are expected to;
1. Identify different techniques in modifying borders of your web browser with Cascading Style Sheet;
2. Explore different border properties in CSS; and
3. Demonstrate the proper steps in modifying borders- Image, Repeat, Attachment and Shorthand in
the web browser using CSS.

DIRECTION: Read the following statement and select the letter of the correct answer.
1. Which CSS property affects the thickness of the border?
a. Border-width
b. Border-size
c. Border-thickness
d. Border-weight
2. Which of the following are valid border styles? Choose all that apply.
a. Dashed
b. Solid
c. Dotted
d. Tripled
3. Which CSS property affects the roundness of a border?
a. Border-radius
b. Border-diameter
c. Border-circle
d. Border-edge
4. What would I code to have a blue dashed border that is 5px thick?
a. border: 5px dashed blue;
b. border: blue dashed 5px;
c. border: dashed 5px blue;
d. border: blue 5px dashed;
5. A shorthand property used to specify the individual border properties: border-width, border-style and
border-color.
a. Border
b. Border-bottom
c. Border-right
d. Border-left

The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the
element it is applied to.

2|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT

.box {
border: 3px solid red;
height: 200px;
width: 200px;
}

Values

The border property accepts one or more of the following values in combination:

border: || ||

o border-width: Specifies the thickness of the border.
 : A numeric value measured in px, em, rem, vh and vw units.
 thin: The equivalent of 1px
 medium: The equivalent of 3px
 thick: The equivalent of 5px
o border-style: Specifies the type of line drawn around the element, including:
 solid: A solid, continuous line.
 none (default): No line is drawn.
 hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an
element without displaying a border.
 dashed: A line that consists of dashes.
 dotted: A line that consists of dots.
 double: Two lines are drawn around the element.
 groove: Adds a bevel based on the color value in a way that makes the element appear pressed
into the document.
 ridge: Similar to groove, but reverses the color values in a way that makes the element appear
raised.
 inset: Adds a split tone to the line that makes the element appear slightly depressed.
 outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly
raised.
o color: Specifies the color of the border and accepts <rgb()></rgb()>, <rgba()>,
<code>&lt;hsl()&gt;&lt;/hsl()&gt;, &lt;hsla()&gt;&lt;/hsla()&gt;, , , currentcolor and </r
gba()>

Browser Support

You can count on excellent support for the border property across all browsers.

Chrome Safari Firefox Opera IE Android iOS

Any Any Any 3.5+ 4+ Any Any
Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options
for styling borders.
 border-collapse: Specifies the spacing between borders on the element.
 border-image: Allows the use of an image to draw the border instead of a solid color.
 border-radius: Provides control for rounded corners.

DIRECTION: Answer the following questions.

(PLEASE TYPE YOUR ANSWER ON THE PROVIDED SHARED BLOG.)
1. What is the purpose of CSS Border?
2. What are the different properties of CSS Border?

DIRECTION: Perform the following Task and provide screen shots of each entry
Open the website: www.w3schools.com
3|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT
Open CSS Tutorial Tab and Click the CSS Background Tutorial
Perform the following tutorials;
1. Border Width
2. Border Color
3. Border Sides
4. Border Shorthand
5. Rounded Borders

Send your screen shots thru messenger.

DIRECTION: Read the following statement and select the letter of the correct answer.
1. Which CSS property affects the thickness of the border?
a. Border-width
b. Border-size
c. Border-thickness
d. Border-weight
2. Which of the following are valid border styles? Choose all that apply.
a. Dashed
b. Solid
c. Dotted
d. Tripled
3. Which CSS property affects the roundness of a border?
a. Border-radius
b. Border-diameter
c. Border-circle
d. Border-edge
4. What would I code to have a blue dashed border that is 5px thick?
a. border: 5px dashed blue;
b. border: blue dashed 5px;
c. border: dashed 5px blue;
d. border: blue 5px dashed;
5. A shorthand property used to specify the individual border properties: border-width, border-style and
border-color.
a. Border
b. Border-bottom
c. Border-right
d. Border-left

Which category in 21st Century skills do you think the core of our topic falls in? (Communication, collaboration,
creativity, critical thinking, productivity, leadership and technology literacy). Explain why.

RECORD YOUR VOICE FOR YOUR ANSWER AND SEND IT THRU MESSENGER (GROUP CHAT)

4|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT