OK, I set up a little more, there are two new values for direction on the certain axes, I added one for speed because moving by 1 pixel was too slow in my opinion and I used a radius-variable for better readability

float circleX;
float circleY;

float directionX;
float directionY;
float speed;
float radius;

void setup() {
  size(600,600);
  smooth();
  circleX = 100;
  circleY = 300;
 
  radius  = 100;
  speed   =   1.5;
  directionX = speed; // move to the right first
  // directionY = 0; // don't move on Y-axis
 
}
void draw() {
  background(100);
 
  if ( directionX > 0 ) {
    // moves to the right
    if(circleX >= width - radius) {
    // reaches right border 
    // stop moving on X now
      directionX = 0;
    // move up on Y instead
      directionY = -speed;
    }
  } else if ( directionX == 0 ) {
    // we're not moving on X then
    // so check Y-axis
    if ( directionY < 0 ) {
      // moves up
      if ( circleY <= radius ) {
        // on top border then
        // turn left...
        directionX = -speed;
        directionY = 0;
      }
    } else if ( directionY > 0 ) {
      // on the way down
      if ( circleY >= height - radius ) {
        // reach the bottom
        // move right again...
        directionX = speed;
        directionY = 0;
      }
    }
  } else if ( directionX < 0 ) {
    // moves to the left
    if ( circleX <= radius ) {
      // reaches left border
      // stop and move down
      directionX = 0;
      directionY = speed;
    } 
  }
  // do the actual movement
  circleX += directionX;     
  circleY += directionY;
 
  ellipse(circleX,circleY, 2 * radius,2 * radius);

}


probably not exactly that what you wanted to achieve, but it shows multiple nested if-else-if-constructs