The application of border-radius causes the div to extend beyond its intended height

Is there a way to achieve a smooth shadow effect on pictures without it touching the corners? I attempted to do this by adding a border-radius and box-shadow to the parent div of the images, but now the parent div is taller than the picture itself. Any suggestions for a better solution would be greatly appreciated. JSFiddle

.box {
    margin:20px;
    border-radius:20px;
    box-shadow:0 0 30px rgba(0,0,0,0.7);
}

.box .box-preview {
    width: 100%;
    border-radius:5px;
}
<div class="box">
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
    </div>

htmlcss

Answer №1

One reason for the space between the image and the text line is because the image is an inline element, meaning it is placed on the same line as the text within the div. As a result, the image is positioned on the baseline of the text line, creating some extra space at the bottom.

To eliminate this space, you can make the image a block element by adding the following CSS:

.box {
    margin:20px;
    border-radius:20px;
    box-shadow:0 0 30px rgba(0,0,0,0.7);
}

.box .box-preview {
    display: block;
    width: 100%;
    border-radius:5px;
}
<div class="box">
        <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview">
    </div>

Answer №2

EXAMPLE : http://jsfiddle.net/ajffyafm/

.container {
    padding:10px;
    border-radius:8px;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.container .image {
    display: block;
    width: 100%;
    border-radius:3px;
}

Answer №3

Seems like this code snippet is achieving the desired outcome:

Check it out on JSFiddle

Take a look at the complete CSS below:

.box-preview {
    margin:20px;
    border-radius:20px;
    box-shadow:0px 0px 30px rgba(0,0,0,0.9);
    width: 100%;
    border-radius:0px; // Modify this to adjust the image border radius.
}

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

Updating content in AngularJS based on the sidebar can be achieved by following these steps:

Yesterday, I posed a question about how to implement multiple views with Angular in order to have a header and sidebar. After receiving some helpful insights, I was able to make progress on creating a header and sidebar for my AngularJS App. You can view ...

javascripthtmlangularjsng-view

Updating HTML5 localStorage value upon a click

Currently, I have implemented a countdown timer using the provided code snippet. To prevent the count from resetting upon page refresh or reload, I am utilizing local storage. However, if there is an alternative solution to achieve this functionality, I wo ...

javascriptjqueryhtmllocal-storage

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...

javascripthtmljquerycss

Ensure that the pseudo element inherits the background color of its parent

My dilemma involves multiple pseudo elements connected to diverse parent divs, each with a unique background color. My goal is for these before and after pseudo elements to mimic the background color of their respective parent divs without the use of Jav ...

htmlcss

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

htmlcss

Creating responsive divs on my webpage

Although I have browsed through various posts with similar questions, none of the solutions seem to work for me. I will make sure to include all relevant information related to my issue and explain why I am unable to resolve it on my own. Currently, I am ...

phphtmlcssresponsive

What is the best way to incorporate visual indicators into specific columns containing certain keywords?

Is there a way to customize the script code responsible for displaying table data so that icons automatically appear next to specific keywords in the Gender column? For instance, can we have an icon like glyphicon glyphicon-heart-empty for Male and glyphic ...

htmlangularjs

I am looking to create an extension that can automatically paste text from a variety of lists, but unfortunately, I am struggling to get it up and running correctly

I'm having trouble pasting text into text boxes or documents. I've tried various methods, but nothing seems to work. Am I missing something? Is there a solution or could I get some assistance? manifest.json { "manifest_version": 3, ...

javascripthtml

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

As a web developer accustomed to working with websites, I am now faced with the task of creating a Windows-based program using VB.net. In this project, I have two domains - A and B, where B is embedded within A using an iframe element. The code snippet for ...

htmlvb.netiframewebbrowser-control

Expanding and collapsing multiple rows within a Bootstrap grid

Seeking advice on Bootstrap and its implementation of columns and rows. Currently facing a cascading effect where I have managers, followed by employees, and then employee family members. The challenge lies in my limited understanding of how Bootstrap uti ...

htmlcsstwitter-bootstraprows

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

htmlcss

How to use jQuery to dynamically set the value of a column span in a

Struggling with setting the value for a table column span. Here is my jQuery code: $('tr td data-th=Name span').val('My span content...'); This is how my HTML appears: <tr> <td data-th="Name"><span class="edit-inpu ...

javascriptjqueryhtml

Modify the div's visibility based on selected option in the dropdown menu

In my PHP file, I have the following codes: <section id="placeOrder"> <h2>Place order</h2> Your details Customer Type: <select name="customerType"> <option value="">Customer Type?</option> <option value="ret ...

javascripthtml

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables

How come only the individual top, bottom, left and right paddings function correctly while the combined padding does not respond?

Seeking to customize a button using SCSS file that is connected to HTML. This button is part of a flex layout design. The element's size is set at 83.333×16px. The box-sizing property is defined as: box-sizing: border-box; Adding padding with s ...

htmlcsssasspadding

How can you style an HTML tag using esc_html in CSS?

I've encountered an issue while editing the woocommerce orders.php template. This template is responsible for displaying the user's placed orders. I have identified several variables that require secure coding, such as $date_created or $view_orde ...

phphtmlcsswordpressescaping

What is the best way to eliminate the gap between two columns of square containers?

ref image How can I create equal spacing between two columns of blocks? Please help me with the following code: <div class="row"> <div class="col-md-6"> <img src="./img/02.jpg&qu ...

htmlcssbootstrap-5

Is there a way to load the right amount of images in advance, depending on the size of the

I'm currently trying to optimize the loading of Largest Contentful Paint (LCP) candidate images based on device size, but I'm encountering difficulties. The issue at hand: On smaller screens, only one image is displayed in a carousel On larger ...

htmlpreloadresponsive-imagescore-web-vitalsweb-vitals

How can I assign a specific class to certain elements within an *ngFor loop in Angular?

I have a situation where I am utilizing the *ngFor directive to display table data with the help of *ngFor="let record of records". In this scenario, I am looking to assign a custom CSS class to the 'record' based on specific conditions; for exam ...

javascriptcssangulartypescriptangular5