Jennifer Bland header image
≡ Menu

Learn the CSS border-radius property by building a calculator

Have you ever seen a button on a web page that has rounded edges? Have you ever seen an image that fits within a circle? If so, you have seen the impact of using the CSS border-radius property.

You can give any element “rounded corners” by applying a border-radius through CSS.

Border-radius syntax

As with many CSS properties relating to margins, padding, and borders, there are four individual properties — one for each corner of a box element — and one shorthand property. Each of the corner attributes will accept one or two values.

The border-radius property is accepted in every major browser, but they have browser-specific attributes. Here are the CSS and browser-specific attributes:
css browser-specific attributes

Each of the individual corner CSS3 properties take either one or two length values (generally ‘px’ or ‘em’ values). If a single value is supplied, then that becomes the radius of a rounded corner. If two values are supplied, then they become the horizontal and vertical radii for an elliptical corner.
[continue reading…]

How to Ace Your Whiteboard Test on Your Job Interview

Whiteboarding exercises. If you interview for a programming position, you will face a whiteboarding challenge. Whether you are interviewing for your first programming job or interviewing for your next programming job, you will have to ace the coding whiteboard exercise. I have created a series of videos that show you how to ace the whiteboard exercise.

I have created a series of four videos that cover the topics of HTML, CSS, JavaScript and jQuery. Please watch these videos so they can help you prepare for your coding whiteboard interview.

HTML and CSS Interview Questions

[continue reading…]

Here are 5 Layouts That You Can Make With FlexBox

The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and developers have faced with CSS. Let me show you how to use it to generate some common layouts and challenges that you will face in designing a responsive website design.

I assume you already know the basis of Flexbox. If not there are many documents teaching you about Flexbox. I would recommend Understanding Flexbox: Everything you need to know.

Here is What We Will Be Making

In this article, I am going to show you how to make 7 different layouts using FlexBox.

  1. Navigation
  2. Center image on the screen
  3. Responsive website layout
  4. AddOn for an input field
  5. 3 column layout

Get The Code

All of the examples that I am going to show can be downloaded from my GitHub account. The code for every example is just HTML and CSS. I have created a master homepage that provides a link to every example that we are going to cover.
[continue reading…]

Think outside the box with CSS shape-outside

CSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap around the images’ bounding box.


A new CSS property called shape-outside lets you wrap text that conforms to the shape of your image.

[continue reading…]