Use CSS to transform a rounded corner into a perfect circle by specifying the radius with a percentage

Question

Use CSS to transform a rounded corner into a perfect circle by specifying the radius with a percentage

Looking to give my images rounded corners, but struggling with Bootstrap 4 responsive images (With the class img-fluid). Using border-radius=15px isn't ideal as it distorts the corners on small viewports and large images.

Tried border-radius=15%;, but non-square images end up with elliptical corners. Adjusting with border-radius=15%/10%; helps, but requires custom ratios for each image's aspect ratio.

Want to achieve consistently circular rounded corners for all images, regardless of aspect ratio in Bootstrap 4. Prefer a CSS-only solution over Javascript for simplicity given limited number of aspect ratios.

twitter-bootstrap css bootstrap-4

Answer 1

Answer №1

For a quick fix, consider leveraging CSS3 vw or exploring viewport width to achieve a similar outcome. By utilizing border-radius:5vw;, you can adjust the border radius percentage based on the overall viewport width.

The actual size of the image is irrelevant; focus on the viewport instead. Despite its roughness, this method can yield satisfactory results.

div{
  background-color:red;
  width:50%;
  height:100px;
  border-radius:5vw;
}

<div></div>

Consider using JavaScript for a more robust solution.

Answer 2

For a quick fix, consider leveraging CSS3 vw or exploring viewport width to achieve a similar outcome. By utilizing border-radius:5vw;, you can adjust the border radius percentage based on the overall viewport width.

The actual size of the image is irrelevant; focus on the viewport instead. Despite its roughness, this method can yield satisfactory results.

div{
  background-color:red;
  width:50%;
  height:100px;
  border-radius:5vw;
}

<div></div>

Consider using JavaScript for a more robust solution.

Answer 3

Answer №2

Unique approach using Javascript

If you're looking to add a 15% border radius to your images, one effective way is to utilize JavaScript (particularly jQuery). By implementing the following code snippet, you can dynamically adjust the border-radius based on the image's width:

$(window).resize( function() {
    $('img').each(function(){
       $(this).css('border-radius',($(this).width()*0.15)+'px');
    });
});
$(document).ready( function() {
  $(window).resize();
});

Explore this functionality further by checking out this CodePen example.

For optimal results, it's recommended to set a 'standard' border-radius for the image in CSS before the script executes.

An alternative solution without relying on Javascript

If you prefer avoiding Javascript, another approach involves wrapping the image within a container and utilizing pseudo-elements to create rounded corners. This method requires square images with solid backgrounds, preferably in SVG format. While functional, this technique introduces additional DOM elements and fixed background colors, making it less elegant compared to the straightforward Javascript solution.

Answer 4

Unique approach using Javascript

If you're looking to add a 15% border radius to your images, one effective way is to utilize JavaScript (particularly jQuery). By implementing the following code snippet, you can dynamically adjust the border-radius based on the image's width:

$(window).resize( function() {
    $('img').each(function(){
       $(this).css('border-radius',($(this).width()*0.15)+'px');
    });
});
$(document).ready( function() {
  $(window).resize();
});

Explore this functionality further by checking out this CodePen example.

For optimal results, it's recommended to set a 'standard' border-radius for the image in CSS before the script executes.

An alternative solution without relying on Javascript

If you prefer avoiding Javascript, another approach involves wrapping the image within a container and utilizing pseudo-elements to create rounded corners. This method requires square images with solid backgrounds, preferably in SVG format. While functional, this technique introduces additional DOM elements and fixed background colors, making it less elegant compared to the straightforward Javascript solution.

Use CSS to transform a rounded corner into a perfect circle by specifying the radius with a percentage

Answer №1

Answer №2

Similar questions

Angular 13 encounters issues loading Bootstrap and JS files whenever the route button is clicked

Styling the TinyMCE Toolbar within a Div container

What causes the image to not appear at the center bottom of the page when using IE for loading?

Arranging Checkboxes Vertically in HTML Without Using Inline Styling

Ensuring the input field and button are positioned in a horizontal line

Two divisions placed side by side

Scrolling horizontally using the WinJS list view

What is the appropriate syntax for the second division?

Text in anchor vertically centered across browsers

Using `overflow: hidden` on a table will result in the bottom and right borders disappearing

The Bootstrap toast feature does not seem to be functioning properly within the context of

The vertical writing mode is causing boxes to stack in an unexpected direction

Creating a minimalist metro-inspired menu using HTML and CSS

Add a focus style to the submit button input

display the inner div adjacent to the outer div

Preventing right-aligned images from overflowing inside a div on Google Chrome

Navigational footer designed by Bootstrap

CSS: creating a subtle fade-in animation for an address element and an image

Tips for controlling HTML elements using JavaScript

Issues with Laravel and Bootstrap 4 Integration