New to Kendo UI for jQuery? Start a free 30-day trial

Connections.content.border

configuration

The border options of the connection label. Applicable when background is set.

connections.content.border

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#fff",
            border: {
                color: "#000",
                width: 1
            }
        }
    }]
});
</script>

connections.content.border.color

String

The color of the connection label border.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#fff",
            border: {
                color: "#2196f3",
                width: 2
            }
        }
    }]
});
</script>

connections.content.border.dashType

String

The dash type of the connection label border. The supported values are "dash", "dashDot", "dot", "longDash", "longDashDot", "longDashDotDot", and "solid".

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#fff",
            border: {
                color: "#000",
                width: 1,
                dashType: "dash"
            }
        }
    }]
});
</script>

connections.content.border.width

Number

The width of the connection label border.

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
    ],
    connections: [{
        from: "1",
        to: "2",
        content: {
            text: "Connection",
            background: "#fff",
            border: {
                color: "#000",
                width: 3
            }
        }
    }]
});
</script>