HTML Styling Guide

Text Formatting

Inline tags for emphasis and decoration.

<b>bold</b>
<i>italic</i>
<em>emphasis</em>
<strong>strong</strong>
<u>underline</u>
<s>strikethrough</s>  <del>deleted</del>  <strike>strike</strike>
<mark>highlighted</mark>
<small>small text</small>
normal <sup>superscript</sup> and <sub>subscript</sub>
<ins>inserted</ins>  <cite>citation</cite>

Headings

Six levels, from largest (<h1>) to smallest (<h6>).

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lists

Unordered (bulleted) and ordered (numbered) lists.

<!-- Unordered -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<!-- Ordered -->
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Blockquotes & Code

Use <blockquote> for quotes, <code> for inline snippets, and <pre> for preformatted blocks.

<blockquote>To be or not to be.</blockquote>

Inline: <code>const x = 42;</code>

Preformatted block:
<pre>
  line one
  line two
</pre>

Links & Images

Links open in a new tab automatically. Images must use http:// or https:// URLs — data URIs are stripped.

<a href="https://example.com">Visit example.com</a>

<img src="https://placehold.co/200x80" alt="Placeholder" width="200" />

Tables

Full table structure including headers, body, and footer sections.

<table border="1" cellpadding="6">
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
    </tr>
  </tbody>
</table>

Layout & Misc

Structural and utility tags for spacing and grouping content.

<hr />

<center>Centered text</center>

<div style="padding: 1rem; background: #f0f0f0;">
  A styled box
</div>

<span style="color: red;">Red inline text</span>

<details>
  <summary>Click to expand</summary>
  Hidden content revealed here.
</details>

Inline Styles

Use the style attribute on most elements. Supported properties include:

• Text: color, font-size, font-family, font-weight, font-style, text-align, text-decoration, text-transform, letter-spacing, line-height
• Box model: margin, padding, width, height, max-width, min-width
• Background: background-color, background-image (http/https only), background-repeat, background-position, background-size
• Border: border, border-radius, border-color, border-width, border-style
• Layout: display, float, clear, overflow, position, z-index, vertical-align
• Other: opacity, cursor, box-shadow, outline, word-wrap, list-style

<p style="color: #c0392b; font-size: 1.2em; font-family: Georgia, serif;">
  Styled paragraph
</p>

<span style="background-color: #ffeeba; padding: 2px 6px; border-radius: 4px;">
  Highlighted badge
</span>

<div style="border: 2px solid #3498db; border-radius: 8px; padding: 1rem;">
  Boxed content
</div>

Legacy & Fun Tags

A few retro and decorative tags are supported for creative Lines.

<font color="purple" size="4" face="Comic Sans MS">Custom font</font>
<big>Big text</big>

<marquee behavior="scroll" direction="left">Hello world!</marquee>

Safety & Filtering

The following are always stripped regardless of what you write:

• <script>, <iframe>, <object>, <embed>, and other executable tags
• Event handler attributes (onclick, onload, etc.)
• javascript: URLs in href or style values
• data: URIs in <img> src
• CSS expression() and @import rules

Lines rendered in HTML mode are sandboxed in an iframe. Use the Preview button in the compose form to see exactly how your Line will look before posting.

Custom Avatar Borders

You can add a decorative ring around your profile picture. A built-in Rainbow border is available for everyone. You can also upload your own custom border PNG — it appears around your avatar on every post, comment, notification, and profile page.

File requirements

Image structure (500×500 px example)

 ┌──────────────────────────────────┐
 │  ░░░░░░  outer ring  ░░░░░░░░░  │  ← your border design lives here
 │  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │     (radius 200–250 px)
 │  ░░░░   ┌─────────────┐   ░░░░  │
 │  ░░░░   │             │   ░░░░  │  ← transparent center circle
 │  ░░░░   │   avatar    │   ░░░░  │     (radius 0–200 px; 400 px diameter)
 │  ░░░░   │             │   ░░░░  │
 │  ░░░░   └─────────────┘   ░░░░  │
 │  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
 │  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
 └──────────────────────────────────┘
   total: 500×500 px

How to design your border

1. Open any image editor (Photoshop, GIMP, Figma, Affinity Photo, etc.) and create a 500×500 px canvas.
2. Draw or place your border design. Keep all artwork in the outer ring — the area between radius 200 px and 250 px (measured from the center at 250, 250).
3. Delete or clear the center circle (radius 0–200 px) so it is fully transparent. A quick way in most editors: draw a circle selection of 400 px diameter centered at 250, 250 and delete its contents.
4. Make sure the canvas background is transparent (no white fill layer below your artwork).
5. Export or save as PNG with transparency preserved. In Photoshop use Export As → PNG. In GIMP use Export As → .png and leave "Save background color" unchecked.
6. Upload in Settings → Profile → Avatar border → Custom.

Tip: the border is scaled to 125% of your avatar size everywhere it appears, so designs with a clear ring shape (like solid stripes, sparkles, or glows near the edge) look best. Very thin details near the inner edge may be clipped.