Skip to main content
Practice

Adjusting Images

You can adjust image sizes using the width and height attributes of the img tag.

For example,

Adjusting Image Size
<img src="image.jpg" alt="Image description" width="300" height="200" />

The code above sets the image size to 300px wide and 200px high.

If you don't specify the image size, it will be displayed at its original file size.


Creating Circular Images​

border-radius is a CSS property that makes the corners of an element rounded. It's used to create circular images or rounded corners on boxes.

The border-radius property can be used as follows:

Using border-radius Property
selector {
  border-radius: value;
}

Here, selector refers to the element you want to make rounded. The value specifies how rounded you want the corners to be, in pixels (px) or percentage (%).

For example, the following CSS code makes the corners of an element with the class box rounded by 10px.

Making Rounded Corners
.box {
  border-radius: 10px;
}

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.