How to set size and borders in css

How to set size and borders in css

In this section we will see how to handle some css properties. To manage element’s size on the webpage we use the height and width properties. for example:

img {

height : 100px;

width: 150px;

}

style.css

Elements on the webpage are already settle according to a specific size. To modify it we need to set height or width property.

img1 {

width: 250px;
background - color: brown;

}

img2 {
  
height: 125 px
background - color: yellow;
}



Borders

Elements on a webpage can have borders around them. To set borde to an html elements we use border property. To make a border appear, we set the value to solid. We can set the width of a border by adding a number in pixels right after solid. Let see how it work

.title {
border: solid 2px;
}

h1 {
border: solid 2px;
}

To set boxer’s color we add the color value at the end.

img {
border: solid 2px green;
}

h3 {
border: solid 4px red;
}

Border-radius

This property is use to round the corners of an element. We use px to or % to set how curve the element’s corner will look.

p { 
border-radius: 10px
background - color: light-blue;
border: solid;
}

Borders-radius works on all elements, even images . It’s an easy way to make images looks great on webpage.

To make an image a circle, we set border-radius to half of the image’s width. It only work when the image size as a square.

img {

height: 100px;
width: 100px;
border-radius: 50px;
border: solid 5px red;

}

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!