How can I hide the broken image icon?
Example:
I have an image with error src:
<img src="Error.src"/>
The solution must work in all browsers.
There is no way for CSS/HTML to know if the image is broken link, so you are going to have to use JavaScript no matter what
But here is a minimal method for either hiding the image, or replacing the source with a backup.
<img src="Error.src" onerror="this.style.display='none'"/>
or
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
Update
You can apply this logic to multiple images at once by doing something like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">
Update 2
For a CSS option see michalzuber's answer below. You can't hide the entire image, but you change how the broken icon looks.
Despite what people are saying here, you don't need JavaScript at all, you don't even need CSS!
It's actually very doable and simple with HTML only.
You can even show a default image if an image doesn't load. Here's how...
This also works on all browsers, even as far back as IE8 (out of 250,000+ visitors to sites I hosted in September 2015, ZERO people used something worse than IE8, meaning this solution works for literally everything).
Step 1: Reference the image as an object instead of an img. When objects fail they don't show broken icons; they just do nothing. Starting with IE8, you can use object and img tags interchangeably. You can resize and do all the glorious stuff you can with regular images too. Don't be afraid of the object tag; it's just a tag, nothing big and bulky gets loaded and it doesn't slow down anything. You'll just be using the img tag by another name. A speed test shows they are used identically.
Step 2: (Optional, but awesome) Stick a default image inside that object. If the image you want actually loads in the object, the default image won't show. So for example you could show a list of user avatars, and if someone doesn't have an image on the server yet, it could show the placeholder image... no JavaScript or CSS required at all, but you get the features of what takes most people JavaScript.
Here is the code...
<object data="avatar.jpg" type="image/jpeg">
<img src="default.jpg" />
</object>
... Yes, it's that simple.
If you want to implement default images with CSS, you can make it even simpler in your HTML like this...
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>
...and just add the CSS from this answer -> https://stackoverflow.com/a/32928240/3196360
Found a great solution at https://bitsofco.de/styling-broken-images/
img {
position: relative;
}
/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
content: attr(alt);
}
<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">
If you will add alt with text alt="abc" it will show the show corrupt thumbnail, and alt message abc
<img src="pic_trulli.jpg" alt="abc"/>
If you will not add alt it will show the show corrupt thumbnail
<img src="pic_trulli.jpg"/>
If you want to hide the broken one
just add alt="" it will not show corrupt thumbnail and any alt message(without using js)
<img src="pic_trulli.jpg" alt=""/>
If you want to hide the broken one
just add alt="" & onerror="this.style.display='none'" it will not show corrupt thumbnail and any alt message(with js)
<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
4th one is a little dangerous(not exactly)
, if you want to add any image in onerror event, it will not display even if Image exist as style.display is like adding. So, use it when you don't require any alternative image to display.
display: 'none'; // in css
If we give it in CSS, then the item will not display(like image, iframe, div like that).
If you want to display image & you want to display totally blank space if error, then you can use, but also be careful this will not take any space. So, you need to keep it in a div may be
Link https://jsfiddle.net/02d9yshw/
I think the easiest way is to hide the broken image icon by the text-indent property.
img {
text-indent: -10000px
}
Obviously it doesn't work if you want to see the "alt" attribute.
in case you like to keep/need the image as a placeholder, you could change the opacity to 0 with an onerror and some CSS to set the image size. This way you will not see the broken link, but the page loads as normal.
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
I liked the answer by Nick and was playing around with this solution. Found a cleaner method. Since ::before/::after pseudos don't work on replaced elements like img and object they will only work if the object data (src) is not loaded. It keeps the HTML more clean and will only add the pseudo if the object fails to load.
object {
position: relative;
float: left;
display: block;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid black;
}
object::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
background: red url("http://placehold.it/200x200");
}
<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>
<object data="http://broken.img/url" type="image/png"></object>
If you need to still have the image container visible due to it being filled in later on and don't want to bother with showing and hiding it you can stick a 1x1 transparent image inside of the src:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I used this for this exact purpose. I had an image container that was going to have an image loaded into it via Ajax. Because the image was large and took a bit to load, it required setting a background-image in CSS of a Gif loading bar.
However, because the src of the was empty, the broken image icon still appeared in browsers that use it.
Setting the transparent 1x1 Gif fixes this problem simply and effectively with no code additions through CSS or JavaScript.
Using CSS only is tough, but you could use CSS's background-image instead of <img> tags...
Something like this:
HTML
<div id="image"></div>
CSS
#image {
background-image: url(Error.src);
width: //width of image;
height: //height of image;
}
Here is a working fiddle.
Note: I added the border in the CSS on the fiddle just to demonstrate where the image would be.
The same idea as described by others works in React as follow:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
Use the object tag. Add alternative text between the tags like this:
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
http://www.w3schools.com/tags/tag_object.asp
You can follow this path as a css solution
img {
width:200px;
height:200px;
position:relative
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
color: transparent;
}
<img src="gdfgd.jpg">
Since 2005, Mozilla browsers such as Firefox have supported the non-standard :-moz-broken CSS pseudo-class that can accomplish exactly this request:
/* for display purposes so you can see the empty cell */
td { min-width:64px; }
img:-moz-broken { display:none; }
img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */
<table border="1"><tr><td>
<img src="error">
</td><td>
<img src="error" alt="error image">
</td><td>
<img src="error" alt="">
</td><td>
<img src="broken" alt="broken image">
</td><td>
<img src="broken" alt="">
</td><td>
<img src="https://i.stack.imgur.com/Mkdgc.png"
alt="A bird" style="width: 120px">
</td></tr></table>
There are several cells in this example. From left to right:
A broken image without alt attribute (baseline): show a broken image
A broken image with alt text (baseline): show the alt text
A broken image with empty alt text (baseline): show the alt text (nothing)
A broken image with alt text (our CSS): hide the broken image
A broken image with empty alt text (our CSS): show the alt text (nothing)
A functional image with alt text (our CSS): show the image
img::before also works in Firefox 64 (though once upon a time it was img::after so this is not reliable). I can't get either of those to work in Chrome 71.
The most compatible solution would be to specify alt="" and to use the Firefox-specific CSS.
Note that a broken image with an empty alt attribute doesn't guarantee the broken image icon will be suppressed, but that does seem to be the behavior in Firefox 103 and Chromium 103. Also note that this violates accessibility guidelines since screen readers will not be able to describe items with empty alt text and that may be disruptive to blind users' experiences.
Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible, because images that a browser can't find fire off an "error" JavaScript event we can watch for.
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
Additionally, you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs.
The trick with img::after is a good stuff, but has at least 2 downsides:
not supported by all browsers (e.g. doesn't work on Edge https://codepen.io/dsheiko/pen/VgYErm)
you cannot simply hide the image, you cover it - so not that helpful when you what to show a default image in the case
I do not know an universal solution without JavaScript, but for Firefox only there is a nice one:
img:-moz-broken{
opacity: 0;
}
edit: doesn't actually solve the asked issue, but might still be useful.
This is what I did with SASS/SCSS. I have utility scss file that contains this mixin:
#mixin fallback() {
background-image: url('/assets/imgs/fallback.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
Its usage in .scss
img {
// ...
#include fallback();
}
You can use before and after as a style to prevent the broken image.
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
In this case, if the image in the src is broken, it will use the before content, and if there is no error it will use the src.
I'm going to build on others' answers. Instead of hiding the tag (which may have important styling), feed it a dummy image:
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
Angular way of hiding the broken image.
Inside Html file
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
Inside Ts file
public showImage = true;
In theory:
Strictly "css only", we have no clean options. See other answers, I have nothing to add.
In practice:
I'd say adding a class on error event is the best way to go. Here's what I mean - and there were answers almost like this, the principle is the same, it's just more elegant if you don't add the style declarations directly. Instead, add a class that can be targeted later:
<img src="..." onerror="this.classList.add('notfound')">
And NOW you can style the hell out of it, using img.notfound as selector. You can make it a habit to add this little fragment to all your images; won't hurt anything until you style it.
Side note, before anyone comments "this is not a css-only solution": yes, thank you captain, indeed it's not. I'm trying to help with the problem itself, a problem many may have, instead of just looking at the exact wording.
This is an old question but here is something that works, the main trick here is never set a fixed height and width on the image i only use percentage.
.example {
background-color: #e7e7e7;
padding: 25px;
}
.image-box {
height: 50px;
width: 50px;
border-radius: 8px;
background-color: rgb(241, 255, 255);
color: rgb(241, 245, 249);
overflow: hidden;
display: block;
position: relative;
}
.image {
display: block;
max-width: 100%;
height: 100%;
object-fit: cover;
}
<div class="example">
<span class="image-box">
<img class="image" src="/broken.jpeg" alt>
</span>
</div>
Hide image alt with this
img {
color: transparent;
}
A basic and very simple way of doing this without any code required would be to just provide an empty alt statement. The browser will then return the image as blank. It would look just like if the image isn't there.
Example:
<img class="img_gal" alt="" src="awesome.jpg">
Try it out to see! ;)
For future googlers, in 2016 there is a browser safe pure CSS way of hiding empty images using the attribute selector:
img[src="Error.src"] {
display: none;
}
Edit: I'm back - for future googlers, in 2019 there is a way to style the actual alt text and alt text image in the Shadow Dom, but it only works in developer tools. So you can't use it. Sorry. It would be so nice.
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
I have a website with many thumbnails. The thumbnails are defined like this:
<li>
<a href='Pic/$gal/sized/$file'>
<img src='Pic/$gal/thumb/$file' alt=''></img>
</a>
</li>
and the CSS that effects them:
Global img-CSS:
img {
display: block;
margin: 0;
padding: 0;
border: none;
background: url('../images/load.gif') no-repeat center;
}
Special css code for the thumbnails:
.gallery ul li img {
width: 174px;
height: 174px;
padding: 4px;
border: 1px solid #FFFFFF;
}
I want to use the background-image as a loading-icon. But as you can see on the following picture, there always is an ugly icon on the left-top of the thumbnail until the picture is completely loaded. I tried to use an background-image as large as the thumbnail itself, so the ugly icon would be overlaped. But this does not work.
http://s7.directupload.net/images/130225/v3l3hkfs.png
Do you have any idea, how I can remove this icon?
Regards,
Oliver
Those are browser generated so you cant get rid of them and the icon will depend on the browser used. In order to not have them show you would need to involve javascript to render the images off canvas or do some kind of preloading.
You could add a blank .png or .gif as the image source and then change the src once the image is loaded.
EDIT:
A good way to store the original src is with a data attribute:
<img data-src='Pic/$gal/thumb/$file' src='blank.png' alt='' />
Thank you very much slamborne!
I created a 1px times 1px transparent blank.png and then I modifed my HTML Tag:
echo "<li><a rel='gallery_group' href='Pic/$gal/sized/$file'><img data-src='Pic/$gal/thumb/$file' src='images/blank.png' alt=''></img></a></li> ";
As you can see, the blank.png is the image source. The blank.png is loaded very quickly, because it is a very tiny picture. My next step was to make sure, that the real image is loaded after the page is loaded.
To do so, I wrote a simple javascript function, that changes all "src" attributes of images to the value of "data-src" attributes:
<script type="text/javascript"
function neueSrc () {
var all = document.getElementsByTagName("img");
for (var i=0, max=all.length; i < max; i++) {
all[i].src = all[i].getAttribute('data-src');
}
}
</script>
This function is executed in the body-tag:
<body onload="neueSrc()">
That is exactly what I wanted! Thank you very much for you quick responses and usefull help.
How do I convert and img tag to css so I don't have to have a million img tags. Or whats the best way todo images with css
<img src="hg-rx.gif" name="foo" width="18" height="18">
I tried background:url in css and it needs text for it to display properly, id hilight and the image would disappear
.hg-text-rx {
background:url(hg-rx.gif);
background-repeat: no-repeat;
position: relative;
}
You can do this with just css by using a div or other block element of fixed width and height and make the image the background of that. But to do this, you must still put the div (for the image) in the HTML so you aren't really cleaning anything up, unless you are just trying to make the site easier to skin completely using CSS. However, this does make rollover states a breeze.
div#hg-rx {
display:block;
width:18px;
height:18px;
background: url(hg-rx.gif) 0 0 no-repeat transparent;
}
<div id="hg-rx"></div>
If you are doing borders, rounded corners or buttons you might want to look into sprites.
http://css-tricks.com/css-sprites/
you can add a image as background in css, but you must set the width and height of image to be visible.
css
.hg-text-rx {background:url("http://dummyimage.com/200x200/000/545");width:200px;height:200px};
Demo: http://jsfiddle.net/2XX8A/
Actually, while this cannot be done strictly in CSS, if you have IMG tags and want to convert them to divs, you can do so using jQuery (a javascript wrapper) on the fly pretty easily.
LIVE DEMO http://jsfiddle.net/Epgvc/4/
HTML
<img src='http://dummyimage.com/200x200/000/fff&text=image1' />
<img src='http://dummyimage.com/100x100/f00/ff0&text=image2' />
<img src='http://dummyimage.com/250x50/0ff/fff&text=image3' />
JS
$('img').each(function(){
var html="<div style='border:1px solid #ff0;width:" + $(this).width() + "px;height:" + $(this).height() + "px;background:url(" + $(this).attr('src')+ ");color:#fff;'>This is a Div!</div>"
$(html).insertBefore($(this));
$(this).remove(); //Comment out this line if you want to leave the original image
});
If you intent on having the image as a background to a text field you could alway use text-indent
.hg-text-rx {
background:url(hg-rx.gif);
background-repeat: no-repeat;
position: relative;
**text-indent:-10000px;**
}
<p>this text wont show, but the image will</p>
However there is conflicting arguments about this technique from a seo point of view
I'm attempting to display a logo (PNG created in Paint.NET) on my web page (XHTML 1.0 Transitional), like this:
<body>
<div class="header">
<div class="logo">
<img src="logo.png" />
</div>
<!-- etc. -->
.header is styled as follows:
.header {
background-color: Black;
color: White;
margin-left: -3em;
padding-top: 12px;
padding-left: 2em;
padding-bottom: 12px;
font-size: 1.4em;
}
.header .logo {
float: right;
}
The logo is white-on-black, with some other colours.
On IE8 (and Google Chrome), the image is displayed correctly. On IE7, the image is not displayed at all. What am I doing wrong?
I don't care about IE6.
If you drag-drop the image directly into IE7 does it display correctly?
If it does, then the issue isn't with the image but it's with your HTML or the CSS.
I don't have IE7 here so can't test directly, but I can recommend a simple approach to troubleshooting:
Remove the CSS styles one-by-one until the image renders in all of your target browsers. That should tell you what is causing the issue (hopefully the reason why will then be relatively easy to fathom)
If it is the float:right that messes it up perheps you should try to clear your floats. Try setting overflow:hidden; on .header class, or apply clear:both on the element that follows it in the markup.
Also the img tag always requires the alt attribute - you can however leave it blank - alt=""
HTML or XHTML? Don't think that a self-closing img-tag is valid in HTML.
EDIT: You are also missing the alt-attribute.
I have this problem in an MVC.NET application using an IMG tag with a src=data string.
At the end of the day, I don't care what's causing it, since it's 1 image out of 60000 (and only in IE)
function showPicture() {
if ($('#picture').css("display") == "none") {
$('#picture').css("display", "");
clearInterval(interval);
}
}
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
interval = setInterval(showPicture, 500);
While I think it's strange that only certain records cause the Display:None attribute to be applied inline, I'm comfortable with sharing this, since the CSS Display:None is not coming from my code.
At any rate, theoretically, you can check to see if it's IE before running this code using the snippet from check for IE browser
Is there any way to set ff and ie to print background images?
I am using stars image to classify some skills and I set it as a background image and positioning to either set one start, two, three, etc. When I try to print the page the images disappear.
So is there any way to make them appear when I print the page or at least have a way of replacing the images with * or something that would be visible?
Have you considered using a print stylesheet? This could allow you to do something like:
<div class="star">*</div>
/* media:screen */
.star {
background: ...;
overflow: hidden;
text-indent: 9999em;
}
/* media:print */
.star {
text-indent: 0;
}
or even easier:
<div class="star"><img src="./images/star.jpg" alt="*" /></div>
/* media:screen */
.star img {
visibility: hidden;
}
/* media:print */
.star img {
visibility: visible;
}
You can specify stylesheets browsers should use by supplying a media tag, either by css or on the link element:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
In Firefox, go to File => Page Setup. There is a checkbox for "Print Background (colors & images)". Just check that and you should be all set.
In your print.css file change the background-image to a list item.
So:
.background {
display: list-item;
list-style-image: url(yourbackgroundimage.gif);
list-style-position: inside;
}
This method is described more here: http://www.web-graphics.com/mtarchive/001703.php
Actually I found the answer to be rather simple.
Situation: I had a div tag with a background image. Which would not printout when printing.
Solution:
Create another style sheet called "print.css"
Add the following line of code to your all your web pages right after your orginal css stylesheet link:
<link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" />
Immediately after your for the original non printing header, add the following:
<div id="header"></div> <!-- YOUR NON PRINTING HEADER -->
<div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>
In your style.css file, which is the main css style for you site, add the following line:
#printheader {display: none; } /* Makes the print header not visible */
In your print.css file, add the following code:
#footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */
#container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */
#printheader {display: block; } /* Turns ON the div when printing */
What you are doing is essentially turning OFF the header on the normal "screen" page and turning the printheader ON when you make a print call.
** Please note: you will need to modify the print.css file to include other elements of your style.css file to format the fonts, colors, etc. Play around with "Print Preview" and add in the elements you need till you get the printout that you've been seeking.
Don't use background-image to display printable images, use the normal <img> tag instead.
background-image is meant for unimportant images which most modern browsers tend to skip during printing (default setting in IE 11, Chrome 35, FF 30).
Why would you not want to use the img tag?
Alignment issues - Use absolute positioning to solve alignment issues.
Spriting - Spriting is possible using simple img and div tags.
Make it more difficult for users to save the image - That is also possible with simple img and div tags.
To "keep my HTML clean" - do any of the workaround solutions really make it cleaner for you? Give it up :)
For IE http://support.microsoft.com/kb/980077
There must be something similar for FF.
p.s. you cannot set this for clients!
p.s.2. you can replace this stars with foreground pictures (absolute if needed) in css (media="print").
I had the same issue with IE not supporting the printing the background.
So I created 2 divs, one div had a higher Z and had the text content. The second div was immediately behind the front div but a lower Z index and had a image (img not background image) for width and height of 100%. So when I showed the 2 divs together it looked like one div because they perfectly overlapped. When I printed in IE Browser it shows with image because the image is not a background image but a normal img tag that fills a lower div.
some code.
<div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div>
<div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;">
<!-- provides the background image for ie browser so that it does not show the lower level divs. -->
<img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" />
</div>
<script language="javascript" type="text/javascript">
function showSurvey(surveyResponseId) {
var e = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
var focusinput = document.getElementById('focusinput');
var nh = 'data-nohide';
if (e.style.display=='none') {
e.style.display='block';//show div
bkgd.style.display='block';//show div
}
focusinput.focus();//set focus so we know when they click outside
e.onclick = function(e) {
this.style.display='none';//hide div if they click on it
bkgd.style.display='none';//show div
};
//if the user press ESC
focusinput.onkeyup = function(e){
if(e.keyCode === 27){
var survey = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
//hide the div
survey.style.display = 'none';
bkgd.style.display = 'none';
this.removeAttribute(nh);
}else{
//do something else with other keys(ie:down, up, enter)...
focusinput.focus();
}
};
//click somewhere else input onblur
// was taken out because the browser print function would close the survey div page.
//focusinput.onblur = function(){
// if(!e.getAttribute(nh)){
// //hide the div
// e.style.display = 'none';
// }
//};
var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId;
YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground});
}
var showBackground = function() {
var e = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
bkgd.style.width = e.innerWidth();
bkgd.style.height = e.innerHeight();
bkgd.style.left = e.offsetWidth();
bkgd.style.top = e.offsetHeight();
}
window.onload = function() {
var focusinput = document.getElementById('focusinput');
focusinput.focus();//set focus so we know when they click outside
}
</script>
in CSS put this
.surveyResponseWindow
{
width:500px;
height:600px;
z-index: 2;
position: absolute;
top:100px;
left:150px;
border:1px solid #AAAAAA;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: -1px 7px 15px -2px #000;
}
.surveyBackgroundDiv
{
z-index: 1;
position: absolute;
top:100px;
left:150px;
width:500px;
height:600px;
border:1px solid #AAAAAA;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: -1px 7px 15px -2px #000;
}
I believe this is a browser setting, not the backend of the web sites. I could be wrong however.