Removing border from WebBrowser control

12,474

Solution 1

IE draws that as part of the default style on the body tag. Set border:0px on the body element and it goes away.

Thankfully, this is going away in IE9.

Solution 2

WebBrowser control inherits display style from control class. If you want to control the border style of control, you can use code like that, e.g. in Form.Designer.cs:


    using System;
    using System.ComponentModel;
    using System.Windows.Forms;

    public class wbExt : System.Windows.Forms.WebBrowser
    {
        private BorderStyle _borderStyle;
        [
        Category("Appearance"),
        Description("The border style")
        ]

        public BorderStyle BorderStyle
        {
            get
            {
                return _borderStyle;
            }
            set
            {
                _borderStyle = value;
                this.RecreateHandle();
                Invalidate();
            }
        }

        protected override CreateParams CreateParams
        {
            get
            {
                const int WS_BORDER = 0x00800000;
                const int WS_EX_STATICEDGE = 0x00020000;
                CreateParams cp = base.CreateParams;
                switch (_borderStyle)
                {
                    case BorderStyle.FixedSingle:
                        cp.Style |= WS_BORDER;
                        break;
                    case BorderStyle.Fixed3D:
                        cp.ExStyle |= WS_EX_STATICEDGE;
                        break;
                }
                return cp;
            }
        }

        public wbExt()
        {
        }
    }

Now you can change generated code in Form class.

private wbExt webBrowser1;

and rewrite creation of webBrowser item in InitializeComponent of form, like that:

this.webBrowser1 = new WindowsFormsApplication1.wbExt();
So, now
webBrowser1.BorderStyle = BorderStyle.None;
will remove any borders from webBrowser control.

Solution 3

I have resolved the same problem by adding border:none; style attribute into the html element.

<html style="border:none;">

First I tried to add it into the body element but It didn't work, but it works on root html element.

The IE version used on Windows XP for WebBrowser object - I think the version 6 - interprets the root html element as having a border by default. If you have direct control over the web page displayed in the WebBrowser, you can add a style attribute directly to the HTML source of the page - as I did -, If not, There should be a way to edit the HTML inside the WebBrowser programmatically on the side of your application.

Share:
12,474
Shoaib
Author by

Shoaib

I'm a front end engineer located in the Bay Area. I'm passionate about web technologies and the art of programming. I also like: Photography NES games (Mega Man) Wright's Pink Popcorn

Updated on June 05, 2022

Comments

  • Shoaib
    Shoaib almost 2 years

    I've got a WebBrowser control sitting on a Form which has an irritating 2px inset-looking border around it. It's causing my content to be clipped by 4 px on the right and bottom, and I can't figure out how to get rid of it. The control itself doesn't have any BorderStyle properties -- how does one remove the border?

    See the red area in the screen shot:

    Make it stop! http://img229.imageshack.us/img229/8342/badbadwebbrowser.gif

    I want the WebBrowser to look like the blue area -- that is, to fill the Form and be flush against the Form's edges.