It adds a space around your image, then adds a background image UNDER your image to create the criss-cross pattern-looking border.

If you want to remove this and you have the Custom Design upgrade, try adding the following CSS code at the bottom of your custom CSS file:
.hentry img { background: none; border: 0; padding: 0; } /* remove default border around images */

#branding {
    background: none;}

#primary .entry-content img,
#primaryFirst .entry-content img {
	background: inherit;
	border: inherit;
	padding: 0;
}

I understand that code is supposed to go somewhere, but where?

here's the page I'm having a problem with: http://brokeartist.wordpress.com/wp-admin/post.php?post=1016&action=edit&message=1

There is a pink frame around the tent symbol and I really don't want it there.

Can anyone tell me how to remove the gray border around images, so that there's no border at all?

I've tried every CSS tip (I have the upgrade) I found here, but no luck.

Would hugely appreciate any advice. Thanks!

Also how can I add a link to my homepage to my banner image?

You cannot add a link using CSS only, but you can repurpose a link from somewhere else and lay it over the top of the header image. For example, here is an example that takes the home tab from the top menu and uses it for the header image link instead:

#pagenav ul .b a {
	border-bottom: none;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	left: 0;
	top: 85px;
	width: 930px;
	height: 198px;
	text-indent: -9999px;
}

* This example is specific to your current blog setup, a change in the menu or another setting or using a different nav element for the link would require some adjustments. This should give you a good starting point and you can fidget with the code until it works how you want.

2. How can I remove the (pink) borders that automatically form around the images I upload?

To remove borders from images in post and page content areas:

.entry img {
	border: none;
}

1. How can I remove the border around the banner image?

#header-image img {
	border: none;
}

(I'm posting this one to try to make sure all the questions in the forum have answers posted as well.)

.title {display:none;}
(this will move other elements up into the space }

.title {visibility:hidden;}
(this just hides it but it continues to take up space)

Caveat: these will hide the title element wherever it may occur, so be alert to that potential ramification.

1. How can I remove the border around the banner image?
2. How can I remove the (pink) borders that automatically form around the images I upload?
3. How can I remove the titles on the pages without getting rid of the navigation bar. Example: The Word "Recipes" on this page: http://pixiwishesforeheadkisses.wordpress.com/my-recipes/

Thank you.

and the two lines going across my website?

To remove the border below the menu:

.full-column {
	border-bottom: none;
}

To remove the border above each post and above pages:

.center-column .hentry,
.center-column .page {
	border-top: none;
}

To remove the border above categories:

.post-meta-data {
	border-top: none;
}

thanks in advance