CSS - Rounded Corner

CSS - Rounded Corner

Basic Syntax

The CSS property for creating rounded corners is border-radius. It lets you set the radius of the corners for an element's border. The border-radius property takes values in length units (such as pixels) or percentages.

The basic syntax for using border-radius is:

element {
  border-radius: value;
}

Here, value can be a single length or percentage value, which will be used for all four corners of the element equally.

div {
  border-radius: 10px;
}

In this case, all four corners of the div element will have a rounded corner with a radius of 10 pixels.

You can also set different radii for specific corners of an element by giving multiple values to the border-radius property. The order of the values matches the top-left, top-right, bottom-right, and bottom-left corners. If fewer than four values are given, the missing values will be figured out based on the available values.

element {
  border-radius: top-left top-right bottom-right bottom-left;
}

div {
  border-radius: 5px 10px 15px 20px;
}

In this example, the div element will have a rounded corner with a radius of 5 pixels for the top-left corner, 10 pixels for the top-right corner, 15 pixels for the bottom-right corner, and 20 pixels for the bottom-left corner.

By using the border-radius property with the right values, you can easily add rounded corners to elements on your web page, giving them a modern and appealing look.

Applying Rounded Corners

div {
  border: 2px solid #000;
  border-radius: 10px;
  padding: 20px;
}

div {
  border: 2px solid #000;
  border-radius: 5px 10px 15px 20px;
  padding: 20px;
}

div {
  border: 2px solid #000;
  border-radius: 10px 20px;
  padding: 20px;
}

Elliptical Corners

In addition to creating circular rounded corners, CSS also lets you create elliptical corners using the border-radius property. Elliptical corners have different radii for the horizontal and vertical directions, resulting in oval-shaped corners.

To create elliptical corners, you need to give two values for the border-radius property, separated by a slash (/). The first value sets the horizontal radius, and the second value sets the vertical radius.

The syntax for creating elliptical corners is:

element {
  border-radius: horizontal-radius / vertical-radius;
}

div {
  border: 2px solid #000;
  border-radius: 20px / 10px;
  padding: 20px;
}

As you can see, the corners of the div element are now elliptical, with a wider horizontal radius and a shorter vertical radius.

You can also set different elliptical radii for each corner by giving four pairs of values, separated by spaces:

div {
  border: 2px solid #000;
  border-radius: 20px 30px 40px 50px / 10px 15px 20px 25px;
  padding: 20px;
}

In this case, each corner will have its own unique elliptical shape based on the specified horizontal and vertical radii.

By using elliptical corners, you can add more visual interest and variety to your designs, creating corners that are not perfectly circular but have different proportions in the horizontal and vertical directions.

Using Shorthand

CSS provides a shorthand property for border-radius that lets you set the values for all four corners in a single line. This shorthand property makes your code more concise and easier to read.

The syntax for the shorthand property is:

element {
  border-radius: top-left top-right bottom-right bottom-left;
}

You can give up to four values, separated by spaces, representing the radii for the top-left, top-right, bottom-right, and bottom-left corners, respectively.

div {
  border: 2px solid #000;
  border-radius: 10px 20px 30px 40px;
  padding: 20px;
}

The div element now has different rounded corners on each side, as specified by the shorthand property.

If you give fewer than four values, the browser will figure out the missing values based on the provided values, similar to how it works with individual border-radius properties.

div {
  border: 2px solid #000;
  border-radius: 10px 20px;
  padding: 20px;
}

In this case, the first value (10px) is used for the top-left and bottom-right corners, while the second value (20px) is used for the top-right and bottom-left corners.

Using the shorthand property for border-radius can make your CSS code more compact and easier to maintain, especially when you want to apply different radii to each corner of an element.

Rounded Images

You can apply rounded corners to images using the border-radius property in CSS. This can make your images look more polished and fit in with the overall design of your web page.

To apply rounded corners to an image, you can use the border-radius property directly on the <img> element. However, if the image has transparent areas or is not perfectly square, the corners of the actual image might still be visible outside the rounded corners.

To fix this, you can wrap the <img> element inside a container, like a <div>, and apply the border-radius to the container instead. Then, use the overflow: hidden property on the container to hide any parts of the image that extend beyond the rounded corners.

<div class="image-container">
  <img src="path/to/your/image.jpg" alt="Rounded Image">
</div>

.image-container {
  border-radius: 50%;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The image is now displayed with fully rounded corners, creating a circular shape. The overflow: hidden property makes sure that any parts of the image outside the circle are hidden.

You can experiment with different values for border-radius to achieve various levels of roundness for your images. For example, using a smaller percentage or a fixed length value will result in less rounded corners.

Rounded Buttons

You can create rounded buttons using CSS by combining the border-radius property with other CSS properties. Rounded buttons can add a modern look to your website or application.

To create a rounded button, you can apply the border-radius property to a button element or any other element that you want to style as a button. In addition to border-radius, you'll use properties like background-color, color, padding, and border to style the button.

<button class="rounded-button">Click Me</button>

.rounded-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 25px;
  cursor: pointer;
}

.rounded-button:hover {
  background-color: #45a049;
}

The button now has rounded corners with a radius of 25 pixels, creating a soft appearance. The green background color and white text provide good contrast and make the button stand out.

You can customize the button by adjusting the values of the CSS properties. For example, you can change the background-color, padding, font-size, or border-radius to match your design preferences.

You can apply hover styles to the button using the :hover pseudo-class, as shown in the example. This gives visual feedback to the user when they hover over the button, indicating that it is clickable.

By combining the border-radius property with other CSS properties, you can create rounded buttons that improve the user experience on your website or application.