Charm - Borders

Add Beautiful Borders

With Lip Gloss, you can add stylish borders to your terminal user interfaces, enhancing the visual appeal of CLIs or Bubble Tea TUIs. From standard rectangular borders to custom designs, Lip Gloss makes border styling simple and flexible.

Combine borders with colors, formatting, and layout for stunning terminal designs.

Border Options

Lip Gloss provides multiple ways to define and apply borders:

Add predefined borders with customizable colors and sides:

// Add a purple, rectangular border
var style = lipgloss.NewStyle().
    BorderStyle(lipgloss.NormalBorder()).
    BorderForeground(lipgloss.Color("63"))

// Set a rounded, yellow-on-purple border to the top and left
var anotherStyle = lipgloss.NewStyle().
    BorderStyle(lipgloss.RoundedBorder()).
    BorderForeground(lipgloss.Color("228")).
    BorderBackground(lipgloss.Color("63")).
    BorderTop(true).
    BorderLeft(true)

Create your own border designs with a custom Border struct:

var myCuteBorder = lipgloss.Border{
    Top:         "._.:*:",
    Bottom:      "._.:*:",
    Left:        "|*",
    Right:       "|*",
    TopLeft:     "*",
    TopRight:    "*",
    BottomLeft:  "*",
    BottomRight: "*",
}

Use shorthand functions to apply borders to specific sides, similar to CSS:

// Add a thick border to the top and bottom
lipgloss.NewStyle().
    Border(lipgloss.ThickBorder(), true, false)

// Add a double border to the top and left sides. Rules are set clockwise from top.
lipgloss.NewStyle().
    Border(lipgloss.DoubleBorder(), true, false, false, true)

How It Works

Apply borders to enhance your terminal output:

Choose a Border Style

Select a predefined border (e.g., Normal, Rounded, Thick, Double) or define a custom Border struct for unique designs.

Apply Borders

Use lipgloss.NewStyle() with BorderStyle or Border to add borders to text:

style := lipgloss.NewStyle().
    BorderStyle(lipgloss.NormalBorder()).
    BorderForeground(lipgloss.Color("63"))
fmt.Println(style.Render("Bordered text!"))

Customize Sides

Use shorthand syntax (e.g., Border(lipgloss.ThickBorder(), true, false)) to apply borders to specific sides, following a clockwise order.

Ensure your terminal supports Unicode characters for custom borders or complex styles to render correctly. Modern terminals like iTerm2 or Alacritty are recommended.