# Styling

Set different styles for the MVC FlexMap control. Learn more about styling the MVC FlexMap control in ASP.NET MVC documentation.

## Content



FlexMap allows you to change the appearance of the map by styling the map and its layers. It allows you to use CSS and create your own custom CSS to apply to the FlexMap control. It also provides you the [SVGStyle](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.SVGStyle.html) class to define svg styles for the layers. For example, in the following image, the background color and font of FlexMap is added using CSS and the GeoMapLayer is filled with a color using [Fill](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.SVGStyle.Fill.html) property of the **SVGStyle** class and the land borders are showcased with the white colored strokes using [Stroke](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.SVGStyle.Stroke.html) property of the **SVGStyle** class.

**![style MVC FlexMap](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexmap-style.png)**

The following code illustrates how you can fill color in a map layer and display land borders using stroke color:

```razor
@using System.Drawing
<style>
    .wj-flexmap {
        max-width: 600px;
        background-color: honeydew;
        font-family: Broadway;
    }
</style>
@(Html.C1().FlexMap().Id("flexMap")
                .Header("MVC Map")
                .Height(500)
                .Layers(ls =>
                {
                    ls.AddGeoMapLayer()
                        .Url("/Content/data/europe.json")
                        .Style(s => s.Fill("rgba(153,216,201,1)").Stroke("White"));
                })
)
```