Skip to content
Fix Code Error

CSS Font Border?

March 13, 2021 by Code Error
Posted By: Anonymous

With all the new CSS3 border stuff going on (-webkit, …) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will accomplish this in CSS/XHTML or do I still need to fire up Photoshop?

Solution

There’s an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

But it would get blurred for more than 1 pixel thickness.

Answered By: Anonymous

Related Articles

  • Active tab issue on page load HTML
  • How to use html template with vue.js
  • Navbar not filling width of page when reduced to mobile view
  • Fix top buttons on scroll of list below
  • Having trouble with my nav bar/header, It used to…
  • Is it possible to apply CSS to half of a character?
  • Adobe XD to responsive html
  • After a little scroll, the sticky navbar just is not…
  • iron-iconset-svg and var(--primary-text-color);
  • How do i update a javascript variable as its value changes?
  • Blazor Can't Update UI
  • Jquery fadeToggle Trouble
  • Web colors in an Android color xml resource file
  • How do I keep only the first map and when the game…
  • CSS Input with width: 100% goes outside parent's bound
  • How do I do a drag and drop using jQuery to move…
  • HTML5 Canvas Resize (Downscale) Image High Quality?
  • Azure Sql : Unable to Replace HTML String
  • How to vertically align an image inside a div
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • Unresponsive hamburger icon in HTML
  • Centering in CSS Grid
  • Bootstrap - center child when parent isn't centered…
  • Adding multiple dropdown menu's next to each other…
  • My DIV elements go diagonal instead of horizontal
  • The theme changer for my code does not seem to work
  • How to prevent scrolling the whole page?
  • Reset/remove CSS styles for element only
  • Keeping the User logged in
  • What is the JSF resource library for and how should…
  • Simplest PHP example for retrieving user_timeline…
  • SVG Mask is "bleeding" on canvas edges
  • Increasing size of semi circle using css
  • I cant get my type writer heading to the center of my code
  • Is it possible to move my text side by side with my icon
  • Twitter Bootstrap tabs not working: when I click on…
  • VueJS masonry layout
  • How to show title in hover - css / jquery
  • Combining Ember Table with Ember Data
  • custom text position on ipywidgets button
  • center 3 items on 2 lines
  • How to stretch the div to all the height of the page?
  • SQL query return data from multiple tables
  • Text border using css (border around text)
  • Why doesnt my table sort my div variable in numerical order?
  • html tables & inline styles
  • Dynamically update values of a chartjs chart
  • moving text and image in nav
  • How to stop the elements from growing when hovering…
  • How to include another XHTML in XHTML using JSF 2.0…
  • Triggering text area by clicking related select/checkbox
  • How do I stretch the slideshow/Carousel in terms of height?
  • List of ANSI color escape sequences
  • How to change the color of vaadin-select-text-field…
  • force css grid container to fill full screen of device
  • Failed to authenticate on SMTP server error using gmail
  • Java - get pixel array from image
  • module.exports cannot find module
  • CSS Variable trough Polymer (dynamically loaded) elements
  • Valid values for android:fontFamily and what they map to?
  • What does "" do?
  • Is there a way to use two CSS3 box shadows on one element?
  • Javascript text animation not triggering
  • How to create a drop shadow only on one side of an element?
  • how to access parent component scope from a child…
  • d3.js - draw arrow line from border to border
  • :hover transition on 1 button affect the other one
  • How to use if else if in button - flutter
  • Positioned element is off when on Safari`
  • CSS3 transition doesn't work with display property
  • How get the base URL via context path in JSF?
  • How to create a footer with a logo on the left
  • Trying to append a Polymer element in another…
  • Why my "title" bloc doesn't go to bottom?
  • Vuetify v-tabs v-tab-item overflows window width
  • How to blur the background after click on the button…
  • Why are CSS keyframe animations broken in Vue…
  • Trying to keep dropdown menus flush to the edge of…
  • How to create a value which can be repeatedly used…
  • Daisy is overlapping the other contents of the div
  • How do I include a JavaScript file in another…
  • How to add fonts to create-react-app based projects?
  • Draw on HTML5 Canvas using a mouse
  • Content showing over the top of tooltip
  • Replacing H1 text with a logo image: best method for…
  • HTML drop-down menu with icons and text
  • Why is it that "No HTTP resource was found that…
  • unable to change text size
  • How to make `` not expand when `` is hovered
  • Javascript validate all checkboxes are selected
  • including regression coefficient and pvalue in the ggplot2
  • Create HTML with inline CSS(including color, font…
  • Ukkonen's suffix tree algorithm in plain English
  • Vue stopPropagation not working - child to parent
  • How to access elements of a JArray (or iterate over them)
  • How to get Google fonts (Varela Round) to work in…
  • Animating Elements in One by One
  • How do you get string interpolation working on a…
  • Android splash screen image sizes to fit all devices
  • Adding gif image in an ImageView in android

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Maven Install on Mac OS X

Next Post:

Fastest method to replace all instances of a character in a string

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error