Tips for creating rounded corners on an image within a bordered padding using CSS

When it comes to rounding the corners of images in CSS using border-radius, I encounter an issue. I have a border around some images with 5px of padding between the image and border. Using border-radius rounds the border, but not the image inside it. Is there a way to round the image itself?

.image-link {
    border: #2EC4B6 solid 3px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;
}
            <div class="col-sm-8 col-md-3 order-2 order-md-1 dish-image">
                <a class="outer-link" href="../maindishes/butternut-chili.html">
                    <img class="img-fluid image-link" src="../maindishes/images/butternut-chili.jpg"
                        alt="picture of dish">
                </a>
           </div>

https://i.sstatic.net/eQ7zU.jpg <--This is what it looks like if I only wrap the anchor tag.

htmlcssimagestyling

Answer №1

Simply adjust the border and padding on the outer link while keeping the image itself rounded.

Here is an example to demonstrate:

.outer-link {
    display: inline-block;
    border: #2EC4B6 solid 3px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 8px;
    line-height: 0;
}

.image-link {
    display: inline-block;
    border-radius: 5px;
}
<a class="outer-link" href="../maindishes/butternut-chili.html">
    <img class="img-fluid image-link"src="https://dummyimage.com/100x100/0000ff/ffffff&text=-image-" alt="Dummy Image">
</a>

Updated: The example has been modified based on suggestions from the discussion.

Answer №2

To achieve rounded corners, you can define the border-radius in your CSS code.

border-radius: 20px;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I add color to arrow icons in tabulator group rows?

Is there a way to specify the color of the arrows in collapsed/expanded group rows? Also, what CSS code should I use to define the font color for column group summaries? You can view an example of what I am trying to customize here: https://jsfiddle.net/s ...

javascriptcsstabulator

Modifying the HTML5 data attribute according to the URL hash

Within my div element, I have this code: <div id="nav-aj" data-options='{"default":'t1","animation": {"duration": 500, "effects": "fade"}}'> </div> I am looking to dynamically adjust the value of the default option based on th ...

javascriptjqueryhtml

I am looking for a way to display or conceal text depending on the presence of an image

Could you please help me with this? I am looking for a solution where text is displayed only when there is content in the src attribute of an img tag. Essentially, I need JavaScript code that can identify if an attribute has content and then make a paragra ...

javascriptjqueryhtml

Exploring MongoDB through User Interface Requests

As part of a project to develop a minimalist browser-based GUI for MongoDB, an interesting question has arisen. How can we accurately display the current state of the database and ensure it is continuously updated? Specifically, what methods can be utiliz ...

javascriptnode.jshtmlmongodbexpress

Transform JSON data into an HTML table using PHP

My goal is to dynamically convert a JSON array into an HTML table using PHP. The challenge lies in the fact that this data can vary with each request, meaning the JSON may contain different arrays and/or different associated names. For example, I have two ...

phphtmlarraysjson

Import of Bootstrap causing disruption in positioning of <figure> element

Check out this codepen example: https://codepen.io/anon/pen/Xgqjyq h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: bold; text-align: center; } .content { margin-left: 5px; margin-right: 5px; t ...

htmlcsstwitter-bootstrap

Is it possible to determine the height of a div after it has been rendered using the .resize method?

In my current structure, <div id="A"> <div id="A1"> <div id="B1"></div> <div id="B2"></div> </div> <div id="A2"></div> </div> A2 and B2 contain tables, while B1 has 4 checkboxes. I&a ...

javascriptjqueryhtml

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...

javascriptcsssassnext.js

Toggle switch unable to reset upon reloading the page

Issue with Toggle Switch Not Resetting on Page Reload I am encountering a problem with a toggle switch I implemented from the W3schools example (link here). Unlike in the W3schools editor where it resets its state upon reload, my toggle switch remains in ...

htmlcsscheckeduncheckedtoggleswitch

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

Preventing button movement during navigation collapse toggle click

I am working on setting up my navbar in the following way: [collapse] navbar icon links sign in button Although I have successfully set this up, the issue is that when the navbar collapse toggle is clicked, it shifts the sign-in button u ...

htmltwitter-bootstrapbootstrap-5

How to create a stunning Bootstrap Jumbotron with a blurred background that doesn't affect the

I need help making my Jumbotron image blurry without affecting the text inside it! Below is the code from my index.html and style.css files. Any assistance would be greatly appreciated. body { background-image: url(bg1.png); background-repeat: repea ...

htmlcsstwitter-bootstrapbackground-image

What is the process for indicating a specific spot on Google Maps?

Hello, I am a new programmer trying to indicate the location of my company. The map pointer is not showing up even though the location is correct. I have tried numerous solutions but none seem to be working. Any assistance would be gre ...

htmlgoogle-mapslocationpoint

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image

White background with a black border and transparency on an Android device

I'm trying to create a shape that has a white background with a black border. <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shap ...

androidcssshapeslayer-list

JQuery does not immediately update the input value

I'm working on a jQuery placeholder that mimics the behavior of default placeholders in Chrome and Firefox for browsers that don't support it. However, I'm facing an issue where the placeholder div's HTML doesn't change as quickly ...

javascriptjqueryhtmlplaceholder

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

javascripthtmlcssregex

Restrict Scrolling on Login Page

I am experiencing an issue where my login screen does not scroll on PC, but when accessed on mobile, it starts to scroll. I have tried implementing various solutions recommended in other threads on this platform, but unfortunately, nothing seems to be work ...

htmlscrollscrollbar

Issue with Bootstrap 3: Element refuses to remain within the defined width of the div container

While utilizing bootstrap 3 within a small div, I noticed that when I enlarge the window by dragging it horizontally, the fields (username and password input fields) that should remain inside the div end up shifting towards the center of the window. Can an ...

htmlcsstwitter-bootstrap-3

Tips for adding transparent images (such as logos) to an HTML website: I'm struggling with getting rid of the white background that appears on the website. Does anyone know how

Seeking guidance as a beginner web developer. I am currently working on adding a transparent logo to my website, but the white background is showing up behind the logo. How can I fix this issue? Here is the link to the image - Here is the HTML & ...

htmlcssbackgroundtransparent