How to make rounded corner using CSS ?

How to Make Rounded Image Corners in CSS?

Last Updated : 13 Nov, 2024

Rounded image corners are used to enhance the visual appeal, making images look more smooth and attractive. To make rounded corners on an image, the border-radius property is used.

Using border-radius Property

The border-radius property in CSS is used to create rounded corners for the image. By setting the border-radius property value to 50px or another value, we can make a circular shape for the corners of the image.

Syntax

.image {
    border-radius: value;
}

Example 1: Using border-radius property with value 50px to make a rounded corners.

HTML

<h3>Using border-radius Property</h3>

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240222094205/js11.jpg" 
     width="300px" height="auto" 
     style="border-radius: 50px;">

Output

shadowOP

Example 2: The top-left and bottom-right corners of an image can be rounded using border-radius values.

HTML

<h3>Using Specific border-radius Properties</h3>
    
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240222094205/js11.jpg"
     width="300px" height="auto" 
     style="border-top-left-radius: 40px; border-bottom-right-radius: 50px;" />

Output

shadowOP

How to make rounded corner using CSS ?

A

anjalibo6rb0

Improve

Article Tags :

Similar Reads

How to make Image Corners Rounded using CSS ?

Rounded image corners are used to enhance the visual appeal, making images look more smooth and attractive. To make rounded corners on an image, the border-radius property is used. Using border-radius PropertyThe border-radius property in CSS is used to create rounded corners for the image. By setti

How to make rounded corner using CSS ?

Creating rounded corners is a popular design technique in web development that enhances the visual appeal of web elements. The CSS border-radius property allows you to easily set the radius of an element's corners, making them rounded. In this article, we will explore how to use the border-radius pr

How to Make an Image Rounded in Bootstrap ?

In Bootstrap, you can make an image rounded by applying the rounded class to it. This class sets the border-radius property, giving the image rounded corners for a softer and more visually appealing appearance. Below are the approaches to make an image rounded in Bootstrap: Table of Content Using ro

How to Add Rounded Corners to an Image in Tailwind CSS ?

Adding rounded corners to an image in Tailwind CSS is an easy way to make your pictures look nicer. Instead of having sharp corners, you can give them smooth, rounded edges. Tailwind CSS has simple classes that let you choose how rounded the corners are, whether just a bit or completely round. Appro

How to make a complex line in pure CSS ?

In this article, we will learn how to make a complex line in Pure CSS. We can achieve this task by creating the CSS border property around the HTML div element. Property Used: width: This property is used to define the width of the element.height: This property is used to define the height of the el

How to Crop Image in CSS?

Cropping images using CSS is an effective way to display only a portion of the image without altering the image file itself. Cropping can allow the designers to focus on the specific parts of the image while maintaining control over how the image fits within the layout. 1. Using overflow PropertyThi

How to add Rounded Corners on Video in HTML ?

Adding Rounded Corners to a video involves modifying the video frame's corners to have a rounded appearance instead of sharp edges which gives the video a smoother, more refined appearance within a webpage's design. Below are the two ways to add round corners on Video in HTML: Table of Content Using

How To Make An Input Appear Rounded in HTML?

To make an input field appear rounded in HTML, you can use the CSS border-radius property. The border-radius property allows you to round the corners of an input box, and you can adjust the value to make the corners more or less rounded. Using border-radiusThe simplest way to create a rounded input

How to Change Image Color in CSS?

Here are the methods to Change Image Color in CSS: 1. Applying CSS FiltersCSS filters allow you to apply visual effects directly to images, such as changing colors, adjusting brightness, or applying grayscale. [GFGTABS] HTML <html> <head> <style> .grayscale { filter: grayscale(100%

How to Rotate an Image on Hover in CSS ?

In CSS, we can add a rotation effect on the image on hover. This increases the interactiveness of the application. We are going to learn how can we rotate an image on hover using CSS. Below are the approaches to rotate an image on hover using CSS: Table of Content Using transform Property(Clockwise