Insert a line, and color to border for grid views in a KV file

Question

How can I insert a line(seperator) between widgets, and also color border for grid views in a KV file:

TextBox is just a TextInput box with max_chars feature.

Current KV file:

<Label@Label>
    text_size: self.size
    valign: 'middle'

<ContactFrm>
    padding: 5,5
    orientation: 'vertical'
    #row_default_height: '36dp'
    #cols:1 
    #spacing: 0,0

    GridLayout:
        cols: 4     
        row_default_height: '32dp'
        row_force_default: True
        spacing: 10,0
        size_hint_y: None
        #height:34

        Label:
            text: 'Name'
            size_hint_x: 0.5

        TextBox:
            id:name
            max_chars:35

        Label:
            text: 'Contact Name'
            size_hint_x: 0.5

        TextBox:
            id:contactname
            max_chars:35

    GridLayout:
        cols: 4     
        row_default_height: '32dp'
        row_force_default: True
        spacing: 10,0       
        size_hint_y: None
        #height: 36             

        Label:
            text: 'Mobile 1'
            size_hint_x: 0.5
        TextBox:
            id:mob1
            max_chars:35
        Label:
            text: 'Mobile 2'
            size_hint_x: 0.5
        TextBox:
            id:mob2
            max_chars:35
        Label:
            text: 'Landline'
            size_hint_x: 0.5
        TextBox:
            id:land1
        max_chars:35
    Label:
        text: 'E-mail'
        size_hint_x: 0.5
    TextBox:
        id:email1
        max_chars:75

GridLayout:
    row_default_height: '32dp'
    row_force_default: True
    spacing: 10,0
    cols: 4     
    size_hint_y: None
    #height: 36

    Label:
        text: 'Street 1'
        size_hint_x: 0.5
    TextBox:
        id:street1
        max_chars:75
    Label:
        text: 'Street 2'
        size_hint_x: 0.5
    TextBox:
        id:street2
        max_chars:75
    Label:
        text: 'Area'
        size_hint_x: 0.5
    TextBox:
        id:area
        max_chars:75
    Label:
        text: 'City'
        size_hint_x: 0.5
    TextBox:
        id:city
        max_chars:35
    Label:
        text: 'District'
        size_hint_x: 0.5
    TextBox:
        id:district
        max_chars:35
    Label:
        text: 'State'
        size_hint_x: 0.5
    TextBox:
        id:state
        max_chars:35
    Label:
        text: 'Zip Code'
        size_hint_x: 0.5
    TextBox:
        id:zipcode
        max_chars:10
BoxLayout:

I am new to both python and kivy, so above code might be a little naive, please advice where all I can improve also. Thank you.

Final Code I used with modifications, so thickness can also be provided:

<Seperator@Widget>:
    id: separator
    size_hint_y: None
    height: 6
    thickness: 2
    canvas:
        Color:
            rgb: .24, .65, .94
        Rectangle:
            #pos: 0, separator.center_y
            pos: self.pos[0], separator.center_y
            size: separator.width, self.thickness

Answer 1

I am new in Kivy but I think you could add a normal Widget as a separator and draw a rectangle on its canvas.

Something like this gives me a red line - see image below:

    Widget:
        id: separator
        size_hint_y: None
        height: 6
        canvas:
            Color:
                rgb: 1., 0., 0.
            Rectangle:
                pos: 0, separator.center_y
                size: separator.width, 2

---

I think you could use canvas (or canvas.before) in GridLayout to draw a border (using rectangle or two - external with color of border and internal with color of background) but probably you will need to make (somehow) some margin to show that border.

---

EDIT:

First solution was with constant thickness.

For different thickness you need some calculation.
I add margin to make that calculation.

<Separator@Widget>
    size_hint_y: None
    thickness: 2
    margin: 2
    height: self.thickness + 2 * self.margin
    color: 1., .0, .0
    canvas:
        Color:
            rgb: self.color
        Rectangle:
            pos: self.x + self.margin, self.y + self.margin + 1
            size: self.width - 2 * self.margin , self.thickness

BTW:
I use +1 in pos because it looks better (but I don't know why).
I add left and right margin.