Assignments Of Class 9: Borders and Outline
Assignment 1: Style a Square Div with Border and Border Radius
Problem:
Create a div element with a width and height of 150px. Apply a solid border with a color of blue and a width of 3px. Then, apply a border-radius of 15px to make the corners rounded.
Solution:
1. HTML:
html
Copy code
<div class="box"></div>
2. CSS:
css
Copy code
.box {
width: 150px;
height: 150px;
border: 3px solid blue; /* Solid blue border with 3px width */
border-radius: 15px; /* Rounded corners */
}
3. Explanation:
o width: 150px; sets the width of the div to 150px.
o height: 150px; sets the height to 150px, forming a square.
o border: 3px solid blue; adds a solid blue border with a width of 3px.
o border-radius: 15px; rounds the corners of the square with a radius of 15px.
Assignment 2: Create a Circle with Border and Outline
Problem:
Create a circle using a div element with a diameter of 150px. Apply a 5px dotted red outline around the circle.
Solution:
1. HTML:
html
Copy code
<div class="circle"></div>
2. CSS:
css
Copy code
.circle {
width: 150px;
height: 150px;
background-color: lightgreen; /* Background color for the circle */
border-radius: 50%; /* Makes it a circle */
outline: 5px dotted red; /* Dotted red outline */
}
3. Explanation:
o width: 150px; and height: 150px; create a square div.
o border-radius: 50%; turns the square into a circle by rounding the corners.
o outline: 5px dotted red; adds a 5px wide dotted red outline outside the circle.
Assignment 3: Add Border and Outline to a Button
Problem:
Create a button element. Add a 2px solid black border around the button. When the button is focused, apply a 3px solid orange outline.
Solution:
1. HTML:
html
Copy code
<button class="btn">Click Me</button>
2. CSS:
css
Copy code
.btn {
padding: 10px 20px;
border: 2px solid black; /* 2px black border */
outline: none; /* Remove default outline */
}
.btn:focus {
outline: 3px solid orange; /* 3px solid orange outline on focus */
}
3. Explanation:
o border: 2px solid black; adds a black border with a width of 2px around the button.
o outline: none; removes the default focus outline.
o outline: 3px solid orange; gives the button an orange outline when focused.
Assignment 4: Style a Div with Multiple Border Styles
Problem:
Create a div element and apply different border styles for the top, right, bottom, and left borders (solid, dashed, dotted, and double).
Solution:
1. HTML:
html
Copy code
<div class="styled-box"></div>
2. CSS:
css
Copy code
.styled-box {
width: 200px;
height: 100px;
border-top: 4px solid red; /* Solid red top border */
border-right: 4px dashed green; /* Dashed green right border */
border-bottom: 4px dotted blue; /* Dotted blue bottom border */
border-left: 4px double black; /* Double black left border */
}
3. Explanation:
o Each side of the div gets a different border style using the properties border-top, border-right, border-bottom, and border-left.
o The styles chosen are solid, dashed, dotted, and double with different colors.
Assignment 5: Apply Border Radius to a Rectangle
Problem:
Create a rectangle with a width of 200px and height of 100px. Apply a border with a width of 3px solid black and a border-radius of 30px.
Solution:
1. HTML:
html
Copy code
<div class="rectangle"></div>
2. CSS:
css
Copy code
.rectangle {
width: 200px;
height: 100px;
border: 3px solid black;
border-radius: 30px;
}
3. Explanation:
o width: 200px; and height: 100px; create a rectangle.
o border: 3px solid black; adds a 3px wide black border around the rectangle.
o border-radius: 30px; rounds the corners of the rectangle by 30px.
Assignment 6: Create a Bordered and Rounded Image
Problem:
Display an image and apply a border around it with a thickness of 5px. Additionally, round the corners of the image using a border-radius of 50%.
Solution:
1. HTML:
html
Copy code
<img src="image.jpg" class="rounded-img" />
2. CSS:
css
Copy code
.rounded-img {
width: 200px;
height: auto;
border: 5px solid black;
border-radius: 50%;
}
3. Explanation:
o The image has a border of 5px with the border: 5px solid black;.
o border-radius: 50%; turns the image into a circle by rounding the corners fully.
Assignment 7: Experiment with Different Border Radius Values
Problem:
Create a div element with a width of 150px and height of 150px. Apply a border-radius with different values for each corner (10px, 20px, 30px, 40px).
Solution:
1. HTML:
html
Copy code
<div class="custom-radius"></div>
2. CSS:
css
Copy code
.custom-radius {
width: 150px;
height: 150px;
background-color: lightblue;
border-radius: 10px 20px 30px 40px; /* Different radius for each corner */
}
3. Explanation:
o The border-radius property is applied with four values: 10px for the top-left corner, 20px for the top-right corner, 30px for the bottom-right corner, and 40px for the bottom-left corner.
Assignment 8: Style a Div with a Thick Outline
Problem:
Create a div element with a width of 200px and height of 100px. Apply a solid green border with a width of 3px and a thick blue outline with a width of 8px.
Solution:
1. HTML:
html
Copy code
<div class="box-outline"></div>
2. CSS:
css
Copy code
.box-outline {
width: 200px;
height: 100px;
border: 3px solid green;
outline: 8px solid blue; /* 8px thick blue outline */
}
3. Explanation:
o border: 3px solid green; adds a 3px green border.
o outline: 8px solid blue; adds a thick blue outline around the div.
Assignment 9: Style a Focused Input Field with Outline
Problem:
Create an input field. When the input is focused, apply an outline with a thickness of 4px solid purple.
Solution:
1. HTML:
html
Copy code
<input type="text" class="input-field" placeholder="Enter text" />
2. CSS:
css
Copy code
.input-field:focus {
outline: 4px solid purple; /* Purple outline when focused */
}
3. Explanation:
o The input field is styled to have no border, and when focused (clicked or selected), a 4px solid purple outline appears.
Assignment 10: Apply Border and Outline to Multiple Elements
Problem:
Create three different elements (div, span, button) and apply a border with different colors and styles. Additionally, add a focus outline for the button.
Solution:
1. HTML:
html
Copy code
<div class="box"></div>
<span class="box"></span>
<button class="btn">Click Me</button>
2. CSS:
css
Copy code
.box {
width: 100px;
height: 50px;
}
.box:first-child {
border: 2px solid red; /* Red border for div */
}
.box:last-child {
border: 2px dashed blue; /* Blue dashed border for span */
}
.btn {
padding: 10px 20px;
border: 2px solid green;
}
.btn:focus {
outline: 3px solid purple; /* Outline for button on focus */
}
3. Explanation:
o The div element has a red solid border.
o The span element has a blue dashed border.
o The button element has a green solid border and a purple outline on focus.
These assignments cover a variety of scenarios where borders, border-radius, and outline properties can be used. Each solution is explained step by step for clarity.
No comments:
Post a Comment